html {
  background: #222;
  font-family: system-ui;
  interpolate-size: allow-keywords;
}

@font-face {
  font-family: seti;
  src: url('./seti.woff') format('woff');
}

.programming-lang-select {
  color-scheme: dark;
  position: absolute;
  top: 400px;
  left: 400px;

  .lang-icon {
    font-family: seti;
    font-size: 1.5em;
    display: grid;
    justify-content: center;
  }

  .lang-icon::before {
    content: attr(data-char);
  }

  @supports (appearance: base-select) {
    appearance: base-select;
    padding: 0.4em 0.5em;
    padding-right: 0.8em;
    background: #1a1a1a;
    border: 1px solid #404040;
    border-radius: 8px;
    display: grid;
    gap: 0.7em;
    grid-template-columns: auto auto;
    align-items: center;

    &::picker-icon {
      display: none;
    }

    &::after {
      display: none;
      content: '';
      --size: 9px;
      width: var(--size);
      height: calc(var(--size) * 0.8);
      background: #e0e0e0;
      clip-path: shape(
        from 0% 0%,
        line to 50% 0%,
        line to 100% 0%,
        line to 50% 100%,
        close
      );

      transition: clip-path 250ms ease;

      @supports (clip-path: shape(from 0% 0%, close)) {
        display: block;
      }
    }

    &:open::after {
      clip-path: shape(
        from 0% 100%,
        line to 50% 0%,
        line to 100% 100%,
        line to 50% 100%,
        close
      );
    }

    legend {
      position: sticky;
      top: 0;
      padding: 0;
      container-type: scroll-state;
      z-index: 1;

      &::before {
        background: #252525;
        display: block;
        color: #888;
        padding: 8px 12px;
        font-size: 0.85em;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        border-bottom: 1px solid #333;
        margin: 0;
        z-index: 1;

        transition: all 500ms ease;
        transition-property: background-color, color;

        @container scroll-state(stuck: top) {
          background-color: #404040;
          color: #999;
        }
      }
    }

    optgroup {
      --legend-text: attr(label);
      position: relative;

      &:first-of-type > legend::before {
        background-color: #404040;
        color: #999;
      }

      & > legend::before {
        content: var(--legend-text);
      }

      &::before {
        content: '';
        position: absolute;
        background: #2a2a2a;
        top: anchor(top);
        left: anchor(left);
        bottom: anchor(bottom);
        right: anchor(right);
        display: none;
        transition:
          top 150ms ease,
          left 150ms ease,
          bottom 150ms ease,
          right 150ms ease,
          display 300ms allow-discrete,
          position-anchor 300ms allow-discrete step-end,
          opacity 300ms ease;

        opacity: 0;
      }

      &:has(option:is(:focus-visible, :hover))::before {
        display: block;
        transition:
          top 150ms ease,
          left 150ms ease,
          bottom 150ms ease,
          right 150ms ease,
          display 300ms allow-discrete,
          opacity 300ms ease;

        opacity: 1;
        @starting-style {
          opacity: 0;
        }
      }
    }

    option,
    selectedcontent {
      color: #e0e0e0;
      display: grid;
      grid-template-columns: 2.2ch 10.6ch;
      gap: 0.5em;
      align-items: center;
      position: relative;
    }

    option {
      padding: 0.4em 0.5em;

      &:hover,
      &:focus {
        outline: none;
        background: none;
      }

      &:checked {
        background: #2d4a5c;
        color: #fff;
      }
    }

    option[value='html'] {
      anchor-name: --html;
    }
    option[value='css'] {
      anchor-name: --css;
    }
    option[value='xml'] {
      anchor-name: --xml;
    }
    option[value='svg'] {
      anchor-name: --svg;
    }
    option[value='markdown'] {
      anchor-name: --markdown;
    }
    option[value='javascript'] {
      anchor-name: --javascript;
    }
    option[value='python'] {
      anchor-name: --python;
    }
    option[value='ruby'] {
      anchor-name: --ruby;
    }
    option[value='php'] {
      anchor-name: --php;
    }
    option[value='perl'] {
      anchor-name: --perl;
    }
    option[value='lua'] {
      anchor-name: --lua;
    }
    option[value='shell'] {
      anchor-name: --shell;
    }
    option[value='powershell'] {
      anchor-name: --powershell;
    }
    option[value='typescript'] {
      anchor-name: --typescript;
    }
    option[value='coffeescript'] {
      anchor-name: --coffeescript;
    }
    option[value='babel'] {
      anchor-name: --babel;
    }
    option[value='elm'] {
      anchor-name: --elm;
    }
    option[value='reasonml'] {
      anchor-name: --reasonml;
    }
    option[value='rescript'] {
      anchor-name: --rescript;
    }
    option[value='haxe'] {
      anchor-name: --haxe;
    }
    option[value='dart'] {
      anchor-name: --dart;
    }
    option[value='c'] {
      anchor-name: --c;
    }
    option[value='cpp'] {
      anchor-name: --cpp;
    }
    option[value='csharp'] {
      anchor-name: --csharp;
    }
    option[value='rust'] {
      anchor-name: --rust;
    }
    option[value='go'] {
      anchor-name: --go;
    }
    option[value='zig'] {
      anchor-name: --zig;
    }
    option[value='d'] {
      anchor-name: --d;
    }
    option[value='vala'] {
      anchor-name: --vala;
    }
    option[value='java'] {
      anchor-name: --java;
    }
    option[value='scala'] {
      anchor-name: --scala;
    }
    option[value='kotlin'] {
      anchor-name: --kotlin;
    }
    option[value='clojure'] {
      anchor-name: --clojure;
    }
    option[value='groovy'] {
      anchor-name: --groovy;
    }
    option[value='haskell'] {
      anchor-name: --haskell;
    }
    option[value='ocaml'] {
      anchor-name: --ocaml;
    }
    option[value='fsharp'] {
      anchor-name: --fsharp;
    }
    option[value='elixir'] {
      anchor-name: --elixir;
    }
    option[value='purescript'] {
      anchor-name: --purescript;
    }
    option[value='prolog'] {
      anchor-name: --prolog;
    }
    option[value='react'] {
      anchor-name: --react;
    }
    option[value='vue'] {
      anchor-name: --vue;
    }
    option[value='svelte'] {
      anchor-name: --svelte;
    }
    option[value='ejs'] {
      anchor-name: --ejs;
    }
    option[value='pug'] {
      anchor-name: --pug;
    }
    option[value='haml'] {
      anchor-name: --haml;
    }
    option[value='liquid'] {
      anchor-name: --liquid;
    }
    option[value='mustache'] {
      anchor-name: --mustache;
    }
    option[value='nunjucks'] {
      anchor-name: --nunjucks;
    }
    option[value='twig'] {
      anchor-name: --twig;
    }
    option[value='slim'] {
      anchor-name: --slim;
    }
    option[value='smarty'] {
      anchor-name: --smarty;
    }
    option[value='jinja'] {
      anchor-name: --jinja;
    }
    option[value='sass'] {
      anchor-name: --sass;
    }
    option[value='less'] {
      anchor-name: --less;
    }
    option[value='stylus'] {
      anchor-name: --stylus;
    }
    option[value='json'] {
      anchor-name: --json;
    }
    option[value='yaml'] {
      anchor-name: --yaml;
    }
    option[value='toml'] {
      anchor-name: --toml;
    }
    option[value='csv'] {
      anchor-name: --csv;
    }
    option[value='tsconfig'] {
      anchor-name: --tsconfig;
    }
    option[value='vite'] {
      anchor-name: --vite;
    }
    option[value='webpack'] {
      anchor-name: --webpack;
    }
    option[value='rollup'] {
      anchor-name: --rollup;
    }
    option[value='grunt'] {
      anchor-name: --grunt;
    }
    option[value='gulp'] {
      anchor-name: --gulp;
    }
    option[value='gradle'] {
      anchor-name: --gradle;
    }
    option[value='maven'] {
      anchor-name: --maven;
    }
    option[value='sbt'] {
      anchor-name: --sbt;
    }
    option[value='bazel'] {
      anchor-name: --bazel;
    }
    option[value='eslint'] {
      anchor-name: --eslint;
    }
    option[value='stylelint'] {
      anchor-name: --stylelint;
    }
    option[value='bower'] {
      anchor-name: --bower;
    }
    option[value='npm'] {
      anchor-name: --npm;
    }
    option[value='yarn'] {
      anchor-name: --yarn;
    }
    option[value='docker'] {
      anchor-name: --docker;
    }
    option[value='karma'] {
      anchor-name: --karma;
    }
    option[value='sql'] {
      anchor-name: --sql;
    }
    option[value='graphql'] {
      anchor-name: --graphql;
    }
    option[value='prisma'] {
      anchor-name: --prisma;
    }
    option[value='julia'] {
      anchor-name: --julia;
    }
    option[value='r'] {
      anchor-name: --r;
    }
    option[value='crystal'] {
      anchor-name: --crystal;
    }
    option[value='nim'] {
      anchor-name: --nim;
    }
    option[value='swift'] {
      anchor-name: --swift;
    }
    option[value='wasm'] {
      anchor-name: --wasm;
    }
    option[value='latex'] {
      anchor-name: --latex;
    }

    optgroup:has(option[value='html']:is(:hover, :focus-visible))::before {
      position-anchor: --html;
    }
    optgroup:has(option[value='css']:is(:hover, :focus-visible))::before {
      position-anchor: --css;
    }
    optgroup:has(option[value='xml']:is(:hover, :focus-visible))::before {
      position-anchor: --xml;
    }
    optgroup:has(option[value='svg']:is(:hover, :focus-visible))::before {
      position-anchor: --svg;
    }
    optgroup:has(option[value='markdown']:is(:hover, :focus-visible))::before {
      position-anchor: --markdown;
    }
    optgroup:has(option[value='javascript']:is(:hover, :focus-visible))::before {
      position-anchor: --javascript;
    }
    optgroup:has(option[value='python']:is(:hover, :focus-visible))::before {
      position-anchor: --python;
    }
    optgroup:has(option[value='ruby']:is(:hover, :focus-visible))::before {
      position-anchor: --ruby;
    }
    optgroup:has(option[value='php']:is(:hover, :focus-visible))::before {
      position-anchor: --php;
    }
    optgroup:has(option[value='perl']:is(:hover, :focus-visible))::before {
      position-anchor: --perl;
    }
    optgroup:has(option[value='lua']:is(:hover, :focus-visible))::before {
      position-anchor: --lua;
    }
    optgroup:has(option[value='shell']:is(:hover, :focus-visible))::before {
      position-anchor: --shell;
    }
    optgroup:has(option[value='powershell']:is(:hover, :focus-visible))::before {
      position-anchor: --powershell;
    }
    optgroup:has(option[value='typescript']:is(:hover, :focus-visible))::before {
      position-anchor: --typescript;
    }
    optgroup:has(option[value='coffeescript']:is(:hover, :focus-visible))::before {
      position-anchor: --coffeescript;
    }
    optgroup:has(option[value='babel']:is(:hover, :focus-visible))::before {
      position-anchor: --babel;
    }
    optgroup:has(option[value='elm']:is(:hover, :focus-visible))::before {
      position-anchor: --elm;
    }
    optgroup:has(option[value='reasonml']:is(:hover, :focus-visible))::before {
      position-anchor: --reasonml;
    }
    optgroup:has(option[value='rescript']:is(:hover, :focus-visible))::before {
      position-anchor: --rescript;
    }
    optgroup:has(option[value='haxe']:is(:hover, :focus-visible))::before {
      position-anchor: --haxe;
    }
    optgroup:has(option[value='dart']:is(:hover, :focus-visible))::before {
      position-anchor: --dart;
    }
    optgroup:has(option[value='c']:is(:hover, :focus-visible))::before {
      position-anchor: --c;
    }
    optgroup:has(option[value='cpp']:is(:hover, :focus-visible))::before {
      position-anchor: --cpp;
    }
    optgroup:has(option[value='csharp']:is(:hover, :focus-visible))::before {
      position-anchor: --csharp;
    }
    optgroup:has(option[value='rust']:is(:hover, :focus-visible))::before {
      position-anchor: --rust;
    }
    optgroup:has(option[value='go']:is(:hover, :focus-visible))::before {
      position-anchor: --go;
    }
    optgroup:has(option[value='zig']:is(:hover, :focus-visible))::before {
      position-anchor: --zig;
    }
    optgroup:has(option[value='d']:is(:hover, :focus-visible))::before {
      position-anchor: --d;
    }
    optgroup:has(option[value='vala']:is(:hover, :focus-visible))::before {
      position-anchor: --vala;
    }
    optgroup:has(option[value='java']:is(:hover, :focus-visible))::before {
      position-anchor: --java;
    }
    optgroup:has(option[value='scala']:is(:hover, :focus-visible))::before {
      position-anchor: --scala;
    }
    optgroup:has(option[value='kotlin']:is(:hover, :focus-visible))::before {
      position-anchor: --kotlin;
    }
    optgroup:has(option[value='clojure']:is(:hover, :focus-visible))::before {
      position-anchor: --clojure;
    }
    optgroup:has(option[value='groovy']:is(:hover, :focus-visible))::before {
      position-anchor: --groovy;
    }
    optgroup:has(option[value='haskell']:is(:hover, :focus-visible))::before {
      position-anchor: --haskell;
    }
    optgroup:has(option[value='ocaml']:is(:hover, :focus-visible))::before {
      position-anchor: --ocaml;
    }
    optgroup:has(option[value='fsharp']:is(:hover, :focus-visible))::before {
      position-anchor: --fsharp;
    }
    optgroup:has(option[value='elixir']:is(:hover, :focus-visible))::before {
      position-anchor: --elixir;
    }
    optgroup:has(option[value='purescript']:is(:hover, :focus-visible))::before {
      position-anchor: --purescript;
    }
    optgroup:has(option[value='prolog']:is(:hover, :focus-visible))::before {
      position-anchor: --prolog;
    }
    optgroup:has(option[value='react']:is(:hover, :focus-visible))::before {
      position-anchor: --react;
    }
    optgroup:has(option[value='vue']:is(:hover, :focus-visible))::before {
      position-anchor: --vue;
    }
    optgroup:has(option[value='svelte']:is(:hover, :focus-visible))::before {
      position-anchor: --svelte;
    }
    optgroup:has(option[value='ejs']:is(:hover, :focus-visible))::before {
      position-anchor: --ejs;
    }
    optgroup:has(option[value='pug']:is(:hover, :focus-visible))::before {
      position-anchor: --pug;
    }
    optgroup:has(option[value='haml']:is(:hover, :focus-visible))::before {
      position-anchor: --haml;
    }
    optgroup:has(option[value='liquid']:is(:hover, :focus-visible))::before {
      position-anchor: --liquid;
    }
    optgroup:has(option[value='mustache']:is(:hover, :focus-visible))::before {
      position-anchor: --mustache;
    }
    optgroup:has(option[value='nunjucks']:is(:hover, :focus-visible))::before {
      position-anchor: --nunjucks;
    }
    optgroup:has(option[value='twig']:is(:hover, :focus-visible))::before {
      position-anchor: --twig;
    }
    optgroup:has(option[value='slim']:is(:hover, :focus-visible))::before {
      position-anchor: --slim;
    }
    optgroup:has(option[value='smarty']:is(:hover, :focus-visible))::before {
      position-anchor: --smarty;
    }
    optgroup:has(option[value='jinja']:is(:hover, :focus-visible))::before {
      position-anchor: --jinja;
    }
    optgroup:has(option[value='sass']:is(:hover, :focus-visible))::before {
      position-anchor: --sass;
    }
    optgroup:has(option[value='less']:is(:hover, :focus-visible))::before {
      position-anchor: --less;
    }
    optgroup:has(option[value='stylus']:is(:hover, :focus-visible))::before {
      position-anchor: --stylus;
    }
    optgroup:has(option[value='json']:is(:hover, :focus-visible))::before {
      position-anchor: --json;
    }
    optgroup:has(option[value='yaml']:is(:hover, :focus-visible))::before {
      position-anchor: --yaml;
    }
    optgroup:has(option[value='toml']:is(:hover, :focus-visible))::before {
      position-anchor: --toml;
    }
    optgroup:has(option[value='csv']:is(:hover, :focus-visible))::before {
      position-anchor: --csv;
    }
    optgroup:has(option[value='tsconfig']:is(:hover, :focus-visible))::before {
      position-anchor: --tsconfig;
    }
    optgroup:has(option[value='vite']:is(:hover, :focus-visible))::before {
      position-anchor: --vite;
    }
    optgroup:has(option[value='webpack']:is(:hover, :focus-visible))::before {
      position-anchor: --webpack;
    }
    optgroup:has(option[value='rollup']:is(:hover, :focus-visible))::before {
      position-anchor: --rollup;
    }
    optgroup:has(option[value='grunt']:is(:hover, :focus-visible))::before {
      position-anchor: --grunt;
    }
    optgroup:has(option[value='gulp']:is(:hover, :focus-visible))::before {
      position-anchor: --gulp;
    }
    optgroup:has(option[value='gradle']:is(:hover, :focus-visible))::before {
      position-anchor: --gradle;
    }
    optgroup:has(option[value='maven']:is(:hover, :focus-visible))::before {
      position-anchor: --maven;
    }
    optgroup:has(option[value='sbt']:is(:hover, :focus-visible))::before {
      position-anchor: --sbt;
    }
    optgroup:has(option[value='bazel']:is(:hover, :focus-visible))::before {
      position-anchor: --bazel;
    }
    optgroup:has(option[value='eslint']:is(:hover, :focus-visible))::before {
      position-anchor: --eslint;
    }
    optgroup:has(option[value='stylelint']:is(:hover, :focus-visible))::before {
      position-anchor: --stylelint;
    }
    optgroup:has(option[value='bower']:is(:hover, :focus-visible))::before {
      position-anchor: --bower;
    }
    optgroup:has(option[value='npm']:is(:hover, :focus-visible))::before {
      position-anchor: --npm;
    }
    optgroup:has(option[value='yarn']:is(:hover, :focus-visible))::before {
      position-anchor: --yarn;
    }
    optgroup:has(option[value='docker']:is(:hover, :focus-visible))::before {
      position-anchor: --docker;
    }
    optgroup:has(option[value='karma']:is(:hover, :focus-visible))::before {
      position-anchor: --karma;
    }
    optgroup:has(option[value='sql']:is(:hover, :focus-visible))::before {
      position-anchor: --sql;
    }
    optgroup:has(option[value='graphql']:is(:hover, :focus-visible))::before {
      position-anchor: --graphql;
    }
    optgroup:has(option[value='prisma']:is(:hover, :focus-visible))::before {
      position-anchor: --prisma;
    }
    optgroup:has(option[value='julia']:is(:hover, :focus-visible))::before {
      position-anchor: --julia;
    }
    optgroup:has(option[value='r']:is(:hover, :focus-visible))::before {
      position-anchor: --r;
    }
    optgroup:has(option[value='crystal']:is(:hover, :focus-visible))::before {
      position-anchor: --crystal;
    }
    optgroup:has(option[value='nim']:is(:hover, :focus-visible))::before {
      position-anchor: --nim;
    }
    optgroup:has(option[value='swift']:is(:hover, :focus-visible))::before {
      position-anchor: --swift;
    }
    optgroup:has(option[value='wasm']:is(:hover, :focus-visible))::before {
      position-anchor: --wasm;
    }
    optgroup:has(option[value='latex']:is(:hover, :focus-visible))::before {
      position-anchor: --latex;
    }

    ::checkmark {
      display: none;
    }

    &::picker(select) {
      appearance: base-select;
      min-height: 250px;
      padding: 0;
      border: none;
      background: none;
      bottom: max(20px, anchor(bottom) - 400px);
      position-try-fallbacks: flip-block;
      overflow: visible;
      clip-path: inset(0 -300px -300px);
      container-type: anchored;

      opacity: 0;
      transition:
        opacity 250ms ease,
        height 250ms,
        display 250ms allow-discrete,
        overlay 250ms allow-discrete;
    }

    .box {
      background: #1a1a1a;
      border: 1px solid #404040;
      border-radius: 8px;
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
      overflow: auto;
      scroll-padding-top: 50px;

      transition: translate 250ms ease-in;
      translate: 0 -100px;

      @container anchored(fallback: flip-block) {
        translate: 0 0;
      }
    }

    &:open .box {
      translate: 0 0;
      transition-timing-function: ease;

      @starting-style {
        translate: 0 -100px;
        @container anchored(fallback: flip-block) {
          translate: 0 0;
        }
      }
    }

    &:open::picker(select) {
      display: flex;
      justify-content: start;

      opacity: 1;
      @starting-style {
        opacity: 0;
      }
    }
  }
}