html {
  background: #444;
  font-family: system-ui;
}

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

  @supports (appearance: base-select) {
    appearance: base-select;

    optgroup {
      position: relative;

      &::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, :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 {
      position: relative;

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

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

    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;
    }

    optgroup:has(option[value='html']:is(:hover, :focus))::before {
      position-anchor: --html;
    }
    optgroup:has(option[value='css']:is(:hover, :focus))::before {
      position-anchor: --css;
    }
    optgroup:has(option[value='xml']:is(:hover, :focus))::before {
      position-anchor: --xml;
    }
    optgroup:has(option[value='svg']:is(:hover, :focus))::before {
      position-anchor: --svg;
    }
    optgroup:has(option[value='markdown']:is(:hover, :focus))::before {
      position-anchor: --markdown;
    }
    optgroup:has(option[value='javascript']:is(:hover, :focus))::before {
      position-anchor: --javascript;
    }
    optgroup:has(option[value='python']:is(:hover, :focus))::before {
      position-anchor: --python;
    }
    optgroup:has(option[value='ruby']:is(:hover, :focus))::before {
      position-anchor: --ruby;
    }

    &::picker(select) {
      appearance: base-select;
    }
  }
}