.HeaderBox {
  position: relative;
  display: flex;
  margin-left: var(--spaceSm);
}

@media (max-width: 64rem) {
  .HeaderBox {
    margin-left: 0;
  }
}

.HeaderBox-content {
  position: relative;
  display: flex;
  gap: 0.375rem;
  align-items: center;
  padding: 0.5rem 0.75rem;
  color: var(--colorTextSubtle);
  font-size: 0.875rem;
  cursor: pointer;
  user-select: none;
  transition: var(--animationBase);
}

.HeaderBox-content.is-active, .HeaderBox-content:hover, .HeaderBox-content:focus {
  color: #1d212b;
  text-decoration: none;
}

.HeaderBox-content svg {
  width: 1rem;
  height: 1rem;
}

.HeaderBox-content[aria-label="Menu"] svg {
  position: relative;
  top: -.25em;
}

.HeaderBox-content[aria-label="Menu"]:after {
  position: absolute;
  bottom: .125em;
  left: 50%;
  font-size: .5em;
  font-weight: 700;
  text-transform: uppercase;
  content: attr(aria-label);
  transform: translateX(-50%);
}

@media (max-width: 36rem) {
  .HeaderBox-content .hidden {
    display: none;
  }
}

.HeaderBox-badge {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  right: 0;
  bottom: 0;
  width: 1.95em;
  height: 1.95em;
  color: #fff;
  background: var(--colorBrandSecondary);
  border-radius: 50%;
  font-size: .6rem;
  font-weight: 700;
  line-height: 1;
  transform: translate(30%, 30%);
}

.HeaderBox-dropdown {
  position: absolute;
  top: calc(100% + .8rem);
  right: 0;
  border-top: 3px solid var(--colorBrand);
  transform: scale(0);
  transform-origin: top right;
  transition: var(--animationBase);
  opacity: 0;
  z-index: var(--layerDropdownZIndex);
}

.HeaderBox-dropdown.is-opened {
  transform: scale(1);
  opacity: 1;
}

.HeaderBox-dropdown::before {
  position: absolute;
  display: block;
  right: 1em;
  bottom: 100%;
  border: 8px solid;
  border-color: transparent transparent var(--colorBrand) transparent;
  content: '';
}

@media (max-width: 64rem) {
  .HeaderBox-dropdown::before {
    right: .2em;
  }
}

.HeaderBox-label {
  display: block;
  margin-left: var(--spaceSm);
  text-transform: uppercase;
}

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

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