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

/* Typograhy */

.h1 {
  @apply text-3xl font-bold;
}

.h2 {
  @apply text-2xl font-bold;
}

.h3 {
  @apply text-xl font-bold;
}

.h4 {
  @apply text-lg font-bold;
}

.h5 {
  @apply text-base font-bold;
}

/* Buttons */

.btn {
  @apply animate-none;
}

/* Forms */

.input-bordered {
  @apply border-2;

  &:focus {
    @apply outline-none border-primary;
  }

  &::-webkit-outer-spin-button,
  &::-webkit-inner-spin-button {
    display: none;
    -webkit-appearance: none;
    margin: 0;
  }

  &[type="number"] {
    -moz-appearance: textfield; /* Firefox */
  }
}

.form-label {
  @apply block text-sm font-medium text-neutral-700;

  &.form-label-lg {
    @apply text-base;
  }
}

.radio-card {
  @apply px-4 py-3 border-2 rounded-lg cursor-pointer font-medium transition;

  &:has(:checked) {
    @apply border-primary bg-green-50 text-green-900;
  }

  /* Scale input on click */
  &:active {
    @apply transform scale-[0.97];
  }
}