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

@layer base {
  label {
    @apply block text-sm font-medium leading-6;
    &[for]:has(~ input[required]) {
      @apply after:content-['*'] after:text-red-600;
    }
  }

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

  input[type='checkbox'] {
    @apply h-4 w-4 rounded border-primary-500 accent-primary-600;
  }

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

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

  .button-primary {
    @apply bg-primary-600 text-white cursor-pointer ring-primary-700 transition duration-100 ease-in-out 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 disabled:cursor-not-allowed disabled:ring-primary-700/20;
  }

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