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

.pagy {
  @apply flex space-x-1 font-semibold text-sm text-gray-500 mt-8;

  a:not(.gap) {
    @apply block rounded-lg px-3 py-1 bg-gray-200;

    &:hover {
      @apply bg-gray-300;
    }

    &:not([href]) { /* disabled links */
      @apply text-gray-300 bg-gray-100 cursor-default;
    }

    &.current {
      @apply text-white bg-gray-400;
    }
  }

  label {
    @apply inline-block whitespace-nowrap bg-gray-200 rounded-lg px-3 py-0.5;

    input {
      @apply bg-gray-100 border-none rounded-md;
    }
  }
}

@layer components {
  .button {
    @apply bg-gray-100 hover:bg-gray-200 font-medium rounded-lg px-6 py-3 text-center transition duration-200
  }

  .button.blue {
    @apply text-white bg-blue-600 hover:bg-blue-700
  }

  .button.red {
    @apply text-white bg-red-600 hover:bg-red-700
  }

  .alert {
    @apply py-3 px-3 bg-red-50 mb-5 text-red-500 font-medium rounded-md text-center
  }

  .notice {
    @apply py-3 px-3 bg-green-50 mb-5 text-green-500 font-medium rounded-md text-center
  }

  h1 {
    @apply font-bold text-4xl
  }

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

  h3 {
    @apply font-bold text-xl
  }

  .text_content {
    p, ul {
      @apply text-xl font-light my-8
    }
  }
}