@layer components {
  /* Default Form Select */
  .form-select {
    @apply transition duration-200 ease-in-out w-full text-sm border-slate-200 shadow-sm rounded-md py-2 px-3 pr-8 focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus:border-primary focus:border-opacity-40 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50;
    &:disabled,
    &[readonly] {
      @apply bg-slate-100 cursor-not-allowed dark:bg-darkmode-800/50;
    }
  }

  /* Default Sizes */
  .form-select-sm {
    @apply text-xs py-1.5 pl-2 pr-8;
  }
  .form-select-lg {
    @apply text-lg py-1.5 pl-4 pr-8;
  }
}