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

/*

@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-200;
  }
}

*/

.btn {
    @apply rounded-lg font-semibold text-sm;

    &.primary {
        @apply bg-blue-200 text-blue-800;
    }

    &.secondary {
        @apply bg-gray-200 text-gray-800;
    }

    &.danger {
        @apply bg-red-200 text-red-800;
    }

    &.success {
        @apply bg-green-200 text-green-800;
    }

    &.warning {
        @apply bg-yellow-200 text-yellow-800;
    }

    &.info {
        @apply bg-blue-200 text-blue-800;
    }
}

.hunt-user {
    &.hound {
        @apply bg-green-200;

        &.selected {
            @apply bg-green-400;
        }
    }

    &.hunter {
        @apply bg-red-200;

        &.selected {
            @apply bg-red-400;
        }
    }
}

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

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

.status {
    @apply inline-block px-2 py-0.5 text-xs font-semibold rounded-full;

    &.started {
        @apply bg-green-200 text-green-800;
    }

    &.draft {
        @apply bg-yellow-200 text-yellow-800;
    }

    &.paused {
        @apply bg-blue-200 text-blue-800;
    }

    &.ended {
        @apply bg-red-200 text-red-800;
    }
}