$pagination: $prefix + 'pagination';

.#{$pagination} {
    ul {
        @apply h-10 text-base inline-flex -space-x-px;

        li:not(:first-child):not(:last-child) button {
            @apply rounded-none;
        }

        li:first-child button {
            @apply ms-0 border-e-0 rounded-e-none;
        }

        li:last-child button {
            @apply me-0 rounded-s-none;
        }
    }

    &-info {
        @apply text-sm font-normal text-gray-500 dark:text-gray-400;

        &>span {
            @apply font-semibold text-gray-900 dark:text-white;
        }
    }

    &-item {
        button {
            @apply relative px-4 h-10 flex items-center justify-center leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white
        }

        &-active-true button {
            @apply text-blue-600 bg-blue-50 hover:bg-blue-100 hover:text-blue-700 dark:border-gray-700 dark:bg-gray-700 dark:text-white;
        }
    }
}