select {
  appearance: none;
  @supports (appearance: base-select) {
    &,
    &::picker(select) {
      appearance: base-select;
    }
  }
}

select {
  display: flex;
  justify-content: space-between;
  min-width: 300px;
  align-items: center;
  color: white;
  padding-block: 10px;
  padding-inline: 10px 30px;
  border: 0;
  border-radius: 5px;
  cursor: pointer;
  font-weight: 700;
  backdrop-filter: blur(5px);
  background: oklch(0.4764 0.2094 259.13 / 0.3)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='%23FFF' class='size-6'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m19.5 8.25-7.5 7.5-7.5-7.5' /%3E%3C/svg%3E%0A")
    right 10px center / 20px no-repeat;

  @supports (appearance: base-select) {
    padding-inline: 10px;
    position: relative;
    background: oklch(0.4764 0.2094 259.13 / 0.3);

    &:focus,
    &:hover {
      background-color: oklch(0.4764 0.2094 259.13 / 0.6);
    }
    
    &::picker-icon {
      content: "";
      width: 20px;
      height: 20px;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='%23FFF' class='size-6'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m19.5 8.25-7.5 7.5-7.5-7.5' /%3E%3C/svg%3E%0A");
      transition: rotate 0.2s ease-out;
    }

    &:open::picker-icon {
      rotate: 180deg;
    }

    &::picker(select) {
      background: transparent;
      font-weight: 400;
      padding: 4px 12px;
      border: 0;
      
      transition:
        translate 0.5s ease-out,
        opacity 0.5s ease-out,
        overlay 0.5s,
        display 0.5s;
      transition-behavior: allow-discrete;

      @media (width < 400px) {
        position-anchor: --html;
        bottom: 0;
        width: 100%;
        padding: 1rem;
      }

      /* 
      Grid makes it kinda akward with the arrow keys. Kinda neat though. Una opened an issue: https://github.com/openui/open-ui/issues/1229
      
      display: grid;
      grid-template-columns: 1fr 1fr; 
      gap: 0.5rem;
      */
    }

    &:open::picker(select) {
      border: 0;

      @media (width < 400px) {
        bottom: 0;
        translate: 0 0;
        @starting-style {
          translate: 0 100%;
          opacity: 0;
        }
      }
    }

    option {
      color: white;
      backdrop-filter: blur(12px);
      border-radius: 4px;
      display: flex;
      margin: 0 0 0.25rem 0;
      padding: 0.33rem;
      cursor: pointer;
      transition-property: opacity, scale;
      transition-duration: 0.2s;
      transition-delay: calc((sibling-count() - sibling-index()) * 100ms);
      scale: 0.25;
      opacity: 0;
      position: relative;

      &:where(:hover, :focus, :active) {
        outline: 1px solid white;
      }
      
      &:checked {
        background: lch(100% 0 0 / 0.666);
        color: black;
      }

      @media (width < 400px) {
        padding-block: 0.76rem;
      }

      &::before {
        content: "";
        position: absolute;
        z-index: -1;
        inset: 0;
        border-radius: inherit;
        border: 1px solid transparent;
        background: linear-gradient(#ffffff00, #ffffff29) border-box;
        mask:
          linear-gradient(black, black) border-box,
          linear-gradient(black, black) padding-box;
        mask-composite: subtract;
      }

      /* 
      IMPROVE: Make a cool checkmark that's more like the chevron
      &::checkmark {
        display: none;
      }
      */
    }

    &:open {
      option {
        scale: 1;
        opacity: 1;
        transition-delay: calc(sibling-index() * 100ms);

        @starting-style {
          scale: 0.25;
          opacity: 0;
        }
      }
    }
  }
}

body {
  height: 100vh;
  margin: 0;
  display: grid;
  place-items: center;
  font-family: system-ui, sans-serif;
  background-image: url(https://assets.codepen.io/3/26-Tahoe-Light-6K.jpg?width=2600&format=auto);
  background-size: cover;
}

.sr-only {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}