/* This file imports all styles defined in other files. */
@import "./fonts.css";

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

/* Global defaults */

@layer base {
  h1, h2, h3, h4, h5, h6 {
    @apply font-bold text-primary;
  }

  h1 {
    @apply text-5xl;
  }
  h2 {
    @apply text-4xl;
  }
  h3 {
    @apply text-3xl;
  }
  h4 {
    @apply text-2xl;
  }
  h5 {
    @apply text-xl;
  }
  h6 {
    @apply text-lg;
  }

  a {
    @apply underline text-secondary-500;
  }

  a:visited {
    @apply text-secondary-700;
  }
}

@layer components {
  button {
    @apply p-2;
    @apply rounded-md;
    @apply bg-neutral-100;
    @apply border-2 border-neutral-200;
    @apply transition-all ease-in-out;
  }
  button:hover {
    @apply bg-neutral-200;
    @apply border-neutral-300;
  }
  button:active {
    @apply bg-neutral-300;
    @apply border-neutral-400;
  }
  button:focus {
    @apply ring-1 ring-neutral-400 ring-offset-1;
  }
  button:disabled {
    @apply opacity-25;
    @apply bg-neutral-100;
    @apply border-2 border-neutral-200;
  }

  table {
    @apply border-collapse;
  }
  th:first-of-type {
    @apply rounded-tl-md;
  }
  th:last-of-type {
    @apply rounded-tr-md;
  }
  tr:last-of-type td:first-of-type {
    @apply rounded-bl-md;
  }
  tr:last-of-type td:last-of-type {
    @apply rounded-br-md;
  }
  tr {
    @apply hover:bg-secondary-300/50;
    @apply border-y border-primary/50;
    @apply bg-secondary-100/10;
  }
  tr:first-of-type, tr:last-of-type {
    @apply border-y-0;
  }
  th {
    @apply bg-primary font-semibold text-secondary-100;
  }
  caption, th, td {
    @apply p-1;
  }
  @media screen(sm) {
    caption, th, td {
      @apply p-2 text-start;
    }
  }

  fieldset {
    @apply border border-secondary-300;
    @apply p-2;
  }
  legend {
    @apply text-black/50;
  }
  input {
    @apply border border-secondary;
    @apply bg-secondary-50;
    @apply rounded-md;
    @apply p-1;
  }
  input:focus {
    @apply outline-none border-none ring-2 ring-secondary-400;
  }
  label {
    @apply text-sm text-secondary;
  }
}
