@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;
}

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

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

  .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 hover:bg-green-200 border-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 hover:bg-blue-200 border-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 border-pink-200 bg-pink-100 hover:border-pink-300 hover:bg-pink-200;
    }

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

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

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

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

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