@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {

  html {
    scroll-behavior: smooth;
  }

  .prose p {
    @apply text-gray-700 dark:text-gray-300;
  }

  /* Base Input Styles */
  [type="text"],
  [type="email"],
  [type="url"],
  [type="password"],
  [type="number"],
  [type="date"],
  [type="datetime-local"],
  [type="month"],
  [type="search"],
  [type="tel"],
  [type="time"],
  [type="week"],
  [type="file"],
  [multiple],
  textarea,
  select {
    @apply w-full py-2 border border-gray-300 rounded-md text-gray-900 placeholder-gray-400 text-sm leading-5 transition-colors duration-200 bg-white shadow-sm text-start;

    /* Height adjustments */
    &[type="text"],
    &[type="email"],
    &[type="url"],
    &[type="password"],
    &[type="number"],
    &[type="date"],
    &[type="datetime-local"],
    &[type="month"],
    &[type="search"],
    &[type="tel"],
    &[type="time"] {
      @apply h-12 lg:h-10;
    }

    /* Mobile small variant */
    &.input-mobile-sm {
      @apply py-1 h-8 lg:py-2 lg:h-10;
    }

    /* Focus States */
    &:focus {
      @apply border-primary-500 ring-1 ring-primary-500 outline-none;
    }

    /* Disabled States */
    &:disabled {
      @apply bg-gray-50 text-gray-500 border-gray-200 cursor-not-allowed;
    }

    /* Error States */
    &.error,
    &.input-error {
      @apply border-red-500 ring-1 ring-red-500;
    }

    /* Success States */
    &.success,
    &.input-success {
      @apply border-green-500 ring-1 ring-green-500;
    }

    /* Dark Mode */
    .dark & {
      @apply bg-gray-800 border-gray-600 text-gray-100 placeholder-gray-400;

      &:focus {
        @apply border-primary-400 ring-primary-400 bg-gray-700;
      }

      &:disabled {
        @apply bg-gray-900 text-gray-600 border-gray-700;
      }

      &.error,
      &.input-error {
        @apply border-red-400 ring-red-400;
      }

      &.success,
      &.input-success {
        @apply border-green-400 ring-green-400;
      }
    }
  }

  /* Select specific styles */
  select {
    @apply bg-[right_0.5rem_center] rtl:bg-left rtl:bg-[left_0.6rem_center];
    background-size: 1.5em 1.5em;
    padding-right: 2.5rem;

    /* RTL select arrow */
    [dir="rtl"] & {
      padding-left: 2.5rem;
      padding-right: 0.75rem;
    }
  }

  /* Date/Time inputs */
  input[type="date"],
  input[type="time"],
  input[type="datetime-local"] {
    @apply cursor-pointer;
  }

  /* Checkbox and Radio Styles */
  [type="checkbox"],
  [type="radio"] {
    @apply border-gray-300 text-primary-600 focus:border-primary-500 focus:ring-primary-500 transition-colors duration-200;

    /* Dark mode */
    .dark & {
      @apply border-gray-600 bg-gray-800 text-primary-400 focus:border-primary-400 focus:ring-primary-400;
    }
  }

  [type="checkbox"] {
    @apply rounded;

    &:checked {
      @apply !bg-primary-500;
    }
  }
}