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

h1 {
  @apply text-[2.25em] font-medium;
}

h2 {
  @apply text-[1.5em] text-center font-light;
}

h4 {
  @apply text-[1.25em] text-center;
}

.prose :where(h2):not(:where([class~="not-prose"] *)) {
  margin-top: 0em;
}

.prose :where(table):not(:where([class~="not-prose"] *)) {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}

@layer components {
  .btn {
    @apply inline-block no-underline rounded-md border shadow-md transition duration-300 ease-in-out;
  }

  .button {
    @apply px-3 py-2 font-semibold leading-6 btn;
  }

  .nbutton {
    @apply btn px-2 pb-[10px] hover:pb-[7px] pt-2 hover:border-b-4;

    &.active {
      @apply border-b-4 pb-[7px];
    }

    &.home {
      @apply bg-green-100 border-green-200 hover:bg-green-200 hover:border-green-300 border-b-green-500 hover:border-b-green-600;

      &.active {
        @apply bg-green-300 border-green-300 border-b-green-600;
      }
    }

    &.administration {
      @apply bg-blue-100 border-blue-200 hover:bg-blue-200 hover:border-blue-300 border-b-blue-500 hover:border-b-blue-600;

      &.active {
        @apply bg-blue-300 border-blue-300 border-b-4 border-b-blue-600 pb-[7px];
      }
    }
  }

  .tpage-nav ul li {
    @apply hover:font-bold hover:underline;

    &.active {
      @apply no-underline;
      a {
        @apply font-semibold;
      }
    }
  }
}

@layer utilities {
  .color {
    &.pink {
      @apply bg-pink-100 border-pink-200 hover:border-pink-300 hover:bg-pink-200;
    }

    &.rose {
      @apply bg-rose-100 border-rose-200 hover:border-rose-300 hover:bg-rose-200;
    }

    &.sky {
      @apply bg-sky-100 border-sky-200 hover:border-sky-300 hover:bg-sky-200;
    }

    &.green {
      @apply bg-green-100 border-green-200 hover:border-green-300 hover:bg-green-200;
    }

    &.indigo {
      @apply bg-indigo-100 border-indigo-200 hover:border-indigo-300 hover:bg-indigo-200;
    }

    &.red {
      @apply bg-red-100 border-red-200 hover:border-red-300 hover:bg-red-200;
    }
  }
}
