@layer components {
  /* Default Form Control */
  .form-control {
    @apply transition duration-200 ease-in-out w-full text-sm border-slate-200 shadow-sm rounded-md placeholder:text-slate-400/90 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 dark:transition-none dark:placeholder:text-slate-500/80;
    &:disabled,
    &[readonly] {
      @apply bg-slate-100 cursor-not-allowed dark:bg-darkmode-800/50 dark:border-transparent;
    }
  }

  /* Default Sizes */
  .form-control-sm {
    @apply text-xs py-1.5 px-2;
  }
  .form-control-lg {
    @apply text-lg py-1.5 px-4;
  }

  /* Form Control Rounded */
  .form-control-rounded {
    @apply rounded-full;
  }
}