@layer components {
  /* The language menu: a <details> whose panel lists every language in three columns, so even
     twenty or more fit on one screen. A click outside or Escape closes it (language_menu_controller). */
  .language-menu {
    --language-menu-background: var(--color-canvas);
    --language-menu-text: var(--color-text);
    --language-menu-heading: var(--color-ink);
    --language-menu-subtle: var(--color-subtle);
    --language-menu-rule: var(--color-border);
    --language-menu-link-background: transparent;
    --language-menu-hover: var(--color-surface);
    --language-menu-current: color-mix(in oklab, var(--color-accent) 30%, var(--color-canvas));
    --language-menu-tick: var(--color-accent-ink);
    --language-menu-toggle-open: var(--color-canvas);
    --language-menu-toggle-ring: var(--color-border);

    position: relative;

    summary {
      display: flex;
      align-items: center;
      gap: calc(var(--space-inline) * 0.75);
      inline-size: fit-content;
      padding: 0.25em 0.6em;
      border-radius: calc(var(--radius-card) / 2);
      list-style: none;
      font-weight: 500;
      letter-spacing: 0.02em;
      cursor: pointer;

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

      /* A chevron, turned up while the menu is open */
      &::after {
        content: "";
        inline-size: 0.4em;
        block-size: 0.4em;
        border-inline-end: 1.5px solid;
        border-block-end: 1.5px solid;
        opacity: 0.6;
        rotate: 45deg;
        translate: 0 -0.15em;
      }
    }

    &[open] summary {
      background: var(--language-menu-toggle-open);
      box-shadow: inset 0 0 0 1px var(--language-menu-toggle-ring);

      &::after {
        rotate: -135deg;
        translate: 0 0.1em;
      }
    }
  }

  /* The language's name and the word "Language" show only in the mobile menu. In the header the word
     is still read out, so the toggle's name ("Language CS") holds the code it shows. */
  .language-menu__label {
    position: absolute;
    inline-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .language-menu__name {
    display: none;
  }

  .language-menu__panel {
    position: absolute;
    inset-block-start: calc(100% + var(--space-block) * 0.75);
    inset-inline-end: 0;
    z-index: 1001;
    inline-size: min(30rem, 100vw - 2 * var(--space-block));
    padding: calc(var(--space-block) * 0.875);
    border-radius: var(--radius-card);
    background: var(--language-menu-background);
    color: var(--language-menu-text);
    box-shadow: var(--shadow-popover);
    font-weight: 400;
    letter-spacing: normal;
    line-height: 1.5;

    /* The arrow pointing up at the current language */
    &::before {
      content: "";
      position: absolute;
      inset-block-start: -6px;
      inset-inline-end: 2em;
      inline-size: 12px;
      block-size: 12px;
      border-radius: 2px;
      background: inherit;
      rotate: 45deg;
    }
  }

  .language-menu__heading {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-block-end: calc(var(--space-block) / 2);
    padding: 0 calc(var(--space-block) / 2) calc(var(--space-block) * 0.625);
    border-block-end: 1px solid var(--language-menu-rule);
    color: var(--language-menu-heading);
    font-weight: 500;

    span {
      color: var(--language-menu-subtle);
      font-size: var(--text-small);
      font-weight: 400;
    }
  }

  /* Alphabetical down each column, then across */
  .language-menu__list {
    columns: 3;
    column-gap: calc(var(--space-block) * 0.375);
    margin: 0;
    padding: 0;
    list-style: none;

    li {
      break-inside: avoid;
    }

    a {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--space-inline);
      padding: 0.4em 0.6em;
      border-radius: calc(var(--radius-card) / 2);
      background: var(--language-menu-link-background);
      color: var(--language-menu-text);
      text-decoration: none;

      &:hover {
        background: var(--language-menu-hover);
      }

      &[aria-current] {
        background: var(--language-menu-current);
        color: var(--language-menu-heading);
        font-weight: 500;

        &::after {
          content: "";
          block-size: 0.75em;
          aspect-ratio: 448 / 512;
          background: var(--language-menu-tick);
          mask: url("/assets/icons/check-8f5d1d6e.svg") center / contain no-repeat;
        }
      }
    }
  }

  .language-menu__note {
    margin-block-start: calc(var(--space-block) / 2);
    padding: calc(var(--space-block) * 0.625) calc(var(--space-block) / 2) 0;
    border-block-start: 1px solid var(--language-menu-rule);
    color: var(--language-menu-subtle);
    font-size: var(--text-small);
  }

  /* In the mobile menu it is a row like the pages above it: "Language" on the left, the current
     language on the right, opening in place to two columns of tiles. */
  .mobile-menu .language-menu {
    --language-menu-background: none;
    --language-menu-link-background: var(--color-canvas);
    --language-menu-toggle-open: transparent;
    --language-menu-toggle-ring: transparent;

    summary {
      inline-size: auto;
      padding: calc(var(--space-block) * 0.75) 0;
      border-radius: 0;
      color: var(--color-ink);
      font-weight: 400;
      letter-spacing: normal;
    }

    .language-menu__label {
      position: static;
      display: inline;
      flex: 1;
      inline-size: auto;
      clip-path: none;
    }

    .language-menu__name {
      display: inline;
      color: var(--color-subtle);
      font-size: var(--text-normal);
    }

    .language-menu__code,
    .language-menu__heading,
    .language-menu__note,
    .language-menu__panel::before {
      display: none;
    }

    .language-menu__panel {
      position: static;
      inline-size: auto;
      padding: 0;
      font-size: var(--text-normal);
      box-shadow: none;
    }

    .language-menu__list {
      columns: 2;

      li {
        padding-block-end: calc(var(--space-block) * 0.375);
      }

      a {
        padding: 0.5em 0.75em;
        border: 1px solid var(--color-border);

        &[aria-current] {
          border-color: transparent;
        }
      }
    }
  }

  /* At the foot of the page it opens upward, on the footer's dark background. */
  .footer .language-menu {
    --language-menu-background: var(--color-ink);
    --language-menu-heading: var(--color-canvas);
    --language-menu-rule: color-mix(in oklab, var(--color-canvas) 12%, transparent);
    --language-menu-hover: var(--color-text);
    --language-menu-current: color-mix(in oklab, var(--color-accent) 20%, var(--color-ink));
    --language-menu-tick: var(--color-accent);
    --language-menu-toggle-open: var(--color-text);
    --language-menu-toggle-ring: transparent;
  }

  .footer .language-menu__panel {
    inset-block-start: auto;
    inset-block-end: calc(100% + var(--space-block) / 2);

    &::before {
      display: none;
    }
  }
}