:root {
    --pagination-skew: 2rem;
    --pagination-border-width: 1px;
}

.pagination {
    @apply flex h-12 lg:h-16 overflow-hidden bg-primary-bg shadow-md;
}

.pagination-item {
    flex: 1 1 0;
    margin-right: calc(-1 * var(--pagination-skew));
    @apply relative;
}

.pagination-item:last-child {
    @apply mr-0;
}

/* Outer clip-path for button shape */
.pagination-item:first-child {
    clip-path: polygon(0 0, calc(100% - var(--pagination-skew)) 0, 100% 100%, 0 100%);
}

.pagination-item:not(:first-child):not(:last-child) {
    clip-path: polygon(0 0, calc(100% - var(--pagination-skew)) 0, 100% 100%, var(--pagination-skew) 100%);
}

.pagination-item:last-child {
    clip-path: polygon(0 0, 100% 0, 100% 100%, var(--pagination-skew) 100%);
}

/* Border and content wrappers */
.pagination-item__border {
    @apply w-full h-full flex items-center justify-center bg-primary-dark/10;
}

.pagination-item__inner {
    @apply w-full h-full flex items-center justify-center;
    @apply lg:text-2xl font-bold;
}

a.pagination-item__border > .pagination-item__inner:hover {
    @apply bg-primary-light text-white;
}

/* Inner clip-path for border effect */
.pagination-item:first-child .pagination-item__inner {
    clip-path: polygon(0 0, calc(100% - var(--pagination-skew)) 0, 100% 100%, 0 100%);
}

.pagination-item:not(:first-child) .pagination-item__inner {
    /* No left/bottom-left border on overlapping edge to prevent double borders */
    clip-path: polygon(0 0, calc(100% - var(--pagination-skew) - var(--pagination-border-width)) 0, calc(100% - var(--pagination-border-width)) 100%, var(--pagination-skew) 100%);
}

.pagination-item:last-child .pagination-item__inner {
    /* No left/bottom-left border on overlapping edge, no right border */
    clip-path: polygon(0 0, 100% 0, 100% 100%, var(--pagination-skew) 100%);
}

.sbw {
    .pagination-item__border {
        @apply bg-sbw-primary-dark/10;
    }

    a.pagination-item__border > .pagination-item__inner:hover {
        @apply bg-sbw-primary;
    }
}

.snz {
    .pagination-item__border {
        @apply bg-snz-primary-dark/10;
    }

    a.pagination-item__border > .pagination-item__inner:hover {
        @apply bg-snz-primary;
    }
}

.ser {
    .pagination-item__border {
        @apply bg-ser-primary/10;
    }

    a.pagination-item__border > .pagination-item__inner:hover {
        @apply bg-ser-primary;
    }
}