.langsel {
  position: relative;
}

.langsel__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.langsel__chevron {
  transition: transform var(--duration-quick) var(--ease);
}

.langsel__menu {
  position: absolute;
  top: calc(100% + var(--s-3));
  right: 0;
  z-index: var(--z-overlay);
  min-width: 184px;
  padding-block: var(--s-3);
  border: 1px solid var(--rule);
  background: var(--ink-2);
  box-shadow: var(--shadow-deep);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition:
    opacity var(--duration-quick) var(--ease),
    transform var(--duration-quick) var(--ease),
    visibility var(--duration-quick);
}

.langsel__menu::before {
  content: "";
  position: absolute;
  inset: calc(-1 * var(--s-3)) 0 auto;
  height: var(--s-3);
}

.langsel__link {
  display: block;
  padding: var(--s-2) var(--s-5);
  font: 400 14px/1.5 var(--sans);
  color: var(--stone);
  transition: color var(--duration-quick) var(--ease);
}

.langsel__link:hover {
  color: var(--ivory);
}

.langsel__link[aria-current="true"] {
  color: var(--gold);
}

.langsel--drawer .langsel__menu {
  right: auto;
  left: 0;
}

.langsel:hover .langsel__menu,
.langsel:focus-within .langsel__menu,
.langsel.is-open .langsel__menu {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.langsel:hover .langsel__chevron,
.langsel.is-open .langsel__chevron {
  transform: rotate(180deg);
}