@import "components.css";
@import 'tom-select/dist/css/tom-select.css';

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

@layer utilities {
    .collapse {
        overflow: hidden;
        transition: max-height 0.3s ease;
        max-height: 0;
    }
    .collapse-open {
        /* Increase the max\-height value to fully display the content */
        max-height: 2000px;
    }
}

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