.custom-select {

  @apply pl-2 pr-1 text-sm text-foreground/80 bg-transparent rounded-md focus:outline-none focus:ring-2 focus:ring-secondary focus:border-transparent disabled:cursor-not-allowed disabled:opacity-50 items-center flex;

  &, &::picker(select) {
    appearance: base-select;
  }
 
  
  /* enable transitions in the drop down */
  &::picker(select) {
    transition: 
      opacity .2s ease,
      transform .2s var(--ease-out-3), 
      display .2s allow-discrete, 
      overlay .2s allow-discrete
    ;
  }
  
  &::picker-icon {
    display: none;
  }
  
  /* set the off stage styles */
  &:not(:open)::picker(select) {
    opacity: 0;
    transform: scale(.95);
  }
  
  /* set the on stage styles */
  &:open::picker(select) {
    opacity: 1;
    transform: scale(1);
  }
  
  /* transition the selected option changing */
  selectedcontent > * {
    transition: 
      transform 1s 
      display 1s allow-discrete, 
      opacity 1s;
    
    @starting-style {
      opacity: 0;
      transform: translateY(10px);
    }

    opacity: 1;

    .description{
      @apply sr-only;
    }
  }
  
  /* customize the invoking button */
  > button {
  
    &:focus-visible {
      outline-offset: -3px;
    }

    &:has(selectedcontent) {
      @apply flex gap-2 items-center;
    }
    & svg {
      inline-size: 2ch;
      transition: transform .3s 
    }
  }
  
  &:open > button svg {
    transform: rotate(.5turn);
  }
  
  /* reset some picker styles */
  &::picker(select) {
    @apply shadow bg-canvas/80 backdrop-blur-md;
 
    border-radius: var(--radius-2);
    padding: 0;
    margin-block: 5px;
    box-shadow: var(--shadow-5);
    
    @media (forced-colors: none) {
      border: none;
    }
  }
  
  /* customize the picker contents */
  > .dropdown-content {
    min-inline-size: calc(anchor-size(self-inline) + 20px);
    scroll-behavior: smooth;
    @apply divide-y divide-foreground/10 py-2 rounded-lg shadow border border-foreground/20; 
    
    &.scrollable {
      max-block-size: 20lh;
      scrollbar-width: thin;
    }

    & hr {
      @apply my-2 border-foreground/10;
    }

    & label {
      display: block;
      position: sticky;
      top: 0;
      z-index: 1;
    }

    & option {
    @apply px-4 py-2 text-sm text-foreground/80 items-center gap-4  justify-start;

      outline-offset: -1px;
      
      &::checkmark {
        @apply sr-only;
      }

      &:focus-visible {
        outline-offset: -1px;
      }

      &:is(:focus, :hover):not(:disabled) {  
      @apply bg-foreground/5 outline-none outline-foreground/20 cursor-pointer;
      }

      &:is(:checked):not(:disabled) {  
        @apply bg-foreground/10;
      }
      &:has(.description) {
        @apply grid justify-start gap-2;
        & .description {
          @apply text-xs text-foreground/60;
        }
      }
    
      option:is(:checked) & .description {
        font-weight: normal;
      }
    > div {
        @apply flex flex-col gap-1;
      }
    
    }
  }
}
