@import 'tailwindcss';

@plugin '@tailwindcss/typography';
@plugin 'ui-ingredients-plugin-tailwindcss';

@layer base {
  input,
  input::-webkit-inner-spin-button,
  input::-webkit-outer-spin-button {
    appearance: none;
    -webkit-appearance: none;
  }

  input::-ms-reveal,
  input::-ms-clear,
  input::-webkit-credentials-auto-fill-button,
  input::-webkit-contacts-auto-fill-button,
  input::-webkit-clear-button,
  input::-webkit-search-clear-button,
  input::-webkit-search-cancel-button,
  input::-webkit-search-decoration,
  input::-webkit-search-results-button,
  input::-webkit-search-results-decoration {
    display: none;
  }
}

@theme {
  --font-sans: 'Inter', sans-serif;
  --font-lexend: 'Lexend', sans-serif;
  --font-mono: 'Fira Code', monospace;

  --spacing-4\.5: 1.125rem;
  --spacing-5\.5: 1.375rem;

  --animate-fade-in: fade-in 150ms ease-in-out;
  --animate-fade-out: fade-out 150ms ease-in-out;
  --animate-collapse-in: collapse-in 150ms ease-in-out;
  --animate-collapse-out: collapse-out 150ms ease-in-out;
  --animate-slide-in-left: slide-in-left 150ms ease-in-out;
  --animate-slide-out-left: slide-out-left 150ms ease-in-out;
  --animate-slide-in-right: slide-in-right 150ms ease-in-out;
  --animate-slide-out-right: slide-out-right 150ms ease-in-out;

  @keyframes fade-in {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }

  @keyframes fade-out {
    0% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }

  @keyframes collapse-in {
    0% {
      height: 0;
    }
    100% {
      height: var(--height);
    }
  }

  @keyframes collapse-out {
    0% {
      height: var(--height);
    }
    100% {
      height: 0;
    }
  }

  @keyframes slide-in-left {
    0% {
      transform: translateX(-100%);
    }
    100% {
      transform: translateX(0);
    }
  }

  @keyframes slide-out-left {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-100%);
    }
  }

  @keyframes slide-in-right {
    0% {
      transform: translateX(100%);
    }
    100% {
      transform: translateX(0);
    }
  }

  @keyframes slide-out-right {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(100%);
    }
  }
}

@custom-variant dark (&:where(.dark, .dark *));
@custom-variant mark (& mark);
