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

@layer base {
  body {
    @apply bg-slate-50 text-slate-900 dark:bg-slate-900 dark:text-slate-50;
  }

  label {
    @apply block text-sm font-medium leading-6;
  }

  input[type='text'],
  input[type='email'],
  input[type='password'] {
    @apply ring-primary-600 placeholder:text-primary-600 block w-full rounded-md border-0 px-2.5 py-1.5 text-sm shadow-sm ring-1 ring-inset sm:text-base sm:text-sm sm:leading-6 dark:bg-slate-800 dark:text-slate-50 dark:placeholder:text-slate-400;
    @apply focus:outline-none focus:ring-2;
    &:has(+ button[type='submit']) {
      @apply block w-full rounded-r-none;
    }
  }

  input[type='checkbox'] {
    @apply border-primary-500 accent-primary-600 dark:accent-primary-600 h-4 w-4 rounded dark:border-slate-700 dark:bg-slate-800;
  }

  button {
    @apply button;
    input + & {
      @apply -ml-px rounded-l-none;
    }
    &[type='submit'] {
      @apply button-primary;
    }
  }
}

@layer components {
  .button {
    @apply ring-primary-300 relative inline-flex items-center justify-center gap-x-1.5 whitespace-pre rounded-md px-3 py-2 text-sm font-semibold text-slate-900 ring-1 ring-inset hover:bg-slate-50 disabled:cursor-not-allowed sm:text-base;
  }

  .button-primary {
    @apply bg-primary-600 ring-primary-600 hover:bg-primary-700 active:bg-primary-800 disabled:bg-primary-600/50 disabled:hover:bg-primary-600/50 disabled:active:bg-primary-600/50 cursor-pointer text-white transition duration-100 ease-in-out disabled:cursor-not-allowed;
  }

  .button-small {
    @apply px-1.5 py-1 text-xs;
  }

  .button-destructive {
    @apply cursor-pointer bg-red-600 text-white ring-0 transition duration-100 ease-in-out hover:bg-red-700 active:bg-red-800 disabled:cursor-not-allowed disabled:bg-red-600/50 disabled:ring-red-700/20 disabled:hover:bg-red-600/50 disabled:active:bg-red-600/50;
    &.button-ghost {
      @apply bg-transparent text-red-600 ring-red-600 hover:bg-red-600/10 active:bg-red-600/20 dark:hover:bg-red-400/30 dark:active:bg-red-400/40;
    }
  }
}