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

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222 84% 5%;

    --secondary: 210 40% 96%;
    --secondary-foreground: 215 16% 47%;
  }

  .dark {
    --background: 200 6% 10%;
    --foreground: 210 40% 98%;

    --secondary: 210 6% 13%;
    --secondary-foreground: 210 6% 40%;
  }
}

@layer components {
  .btn {
    @apply rounded-lg px-4 py-2 text-sm outline-none;
  }

  .btn-primary {
    @apply transition-all bg-primary text-white hover:bg-primary-dark focus:bg-primary-dark focus:ring-4 focus:ring-primary/15;
  }

  .btn-danger {
    @apply transition-all bg-danger text-white hover:bg-danger-dark focus:bg-danger-dark focus:ring-4 focus:ring-danger/15;
  }

  .btn-success {
    @apply transition-all bg-success text-white hover:bg-success-dark focus:bg-success-dark focus:ring-4 focus:ring-success/15;
  }

  .btn-secondary {
    @apply transition-all bg-background text-foreground hover:bg-secondary focus:bg-secondary focus:ring-2 focus:ring-secondary focus:ring-offset-2 focus:ring-offset-background border border-secondary;
  }

  .btn-link {
    @apply text-sm text-secondary-foreground hover:text-foreground hover:underline focus:text-foreground focus:underline;
  }

  .btn-close {
    @apply text-2xl p-1;
  }

  .form-control {
    @apply rounded-lg border border-gray-200 bg-background text-foreground outline-none transition-all dark:border-gray-500/25 focus-within:border-primary focus-within:ring-4 focus-within:ring-primary/15 dark:focus-within:border-primary;
  }

  .form-control:disabled,
  .form-control[aria-disabled="true"] {
    @apply cursor-not-allowed bg-secondary/25 focus-within:ring-0 focus-within:border-gray-200 dark:focus-within:border-gray-500/25;
  }

  :has(.form-control + p.text-danger)>.form-control {
    @apply border-danger focus-within:ring-danger/15;
  }

  .checkbox {
    @apply rounded border border-gray-200 dark:border-gray-500/25 bg-background text-primary !outline-none transition-all focus:border-primary focus:ring-2 focus:ring-primary/15 focus:ring-offset-2 focus:ring-offset-background;
  }

  .animate-typing {
    animation: typing 1s linear infinite;
    animation-delay: -0.9s;
  }

  .typing .animate-typing:nth-child(2) {
    animation-delay: -0.7s;
  }
  
  .typing .animate-typing:nth-child(3) {
    animation-delay: -0.6s;
  }

  @keyframes typing {
    0%, 60%, 100% {
      transform: initial;
      opacity: .6;
    }

    30% {
      transform: translateY(-6px);
      opacity: 1;
    }
  }
}