@layer components {
  /* The language menu: a <details> whose list opens below the current language. */
  .language-menu {
    position: relative;

    summary {
      list-style: none;
      cursor: pointer;

      &::-webkit-details-marker {
        display: none;
      }
    }
  }

  .language-menu__list {
    position: absolute;
    inset-block-start: calc(100% + var(--space-block) / 2);
    inset-inline-end: 0;
    z-index: 1001;
    min-inline-size: 10rem;
    margin: 0;
    padding: calc(var(--space-block) / 2) 0;
    list-style: none;
    border-radius: var(--radius-card);
    background: var(--color-canvas);
    box-shadow: var(--shadow-raised);

    a {
      display: block;
      padding: calc(var(--space-block) / 2) var(--space-block);
      color: var(--color-text);
      text-decoration: none;

      &:hover {
        background: var(--color-surface);
      }

      &[aria-current] {
        font-weight: 500;
      }
    }
  }

  /* In the mobile menu the list opens in place, under the current language. */
  .mobile-menu .language-menu__list {
    position: static;
    background: none;
    box-shadow: none;
  }

  /* At the foot of the page it opens upward, on the footer's dark background. */
  .footer .language-menu__list {
    inset-block-start: auto;
    inset-block-end: calc(100% + var(--space-block) / 2);
    background: var(--color-ink);

    a:hover {
      background: var(--color-text);
    }
  }
}