.HeaderBox {
  position: relative;
  margin-left: -1px;
}

.HeaderBox-content {
  color: currentColor;
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: var(--animationBase);
  position: relative;
  white-space: nowrap;
  padding: 1em;
  font-size: .7em;
  line-height: 1;
}

.HeaderBox-content.is-active, .HeaderBox-content:hover, .HeaderBox-content:focus {
  color: var(--colorBrand);
  text-decoration: none;
}

.HeaderBox-content svg {
  font-size: .86em;
}

.HeaderBox-label {
  margin-left: var(--spaceSm);
}

@media (max-width: 32rem) {
  .HeaderBox-label {
    display: none;
  }
}

.HeaderBox-badge {
  position: absolute;
  bottom: 0;
  right: 0;
  transform: translate(50%, 50%);
  background: var(--colorThemeAccent);
  color: var(--colorText);
  font-weight: 700;
  font-size: .5em;
  width: 1.6em;
  height: 1.6em;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: var(--animationBase);
}

.HeaderBox-badge:empty {
  opacity: 0;
}

/*# sourceMappingURL=header-box.min.css.map */