/* ==========================================================================
   Variables
   ========================================================================== */

.ts-pagination {
    --accent-color: initial;
    --accent-foreground-color: initial;
    --horizontal-padding-multiplier: 1;
}

/* ==========================================================================
   Base
   ========================================================================== */

.ts-pagination {
    background: var(--ts-gray-200);
    display: inline-flex;
    padding: 0.25rem 0.5rem;
    border-radius: 100rem;
    color: var(--ts-gray-800);
    border: 1px solid var(--ts-gray-200);
    gap: calc(0.15rem * var(--horizontal-padding-multiplier));
}

/* ==========================================================================
   Structure
   ========================================================================== */

.ts-pagination .item {
    border-radius: 100rem;
    padding: 0.5rem 0.7rem;
    line-height: 1;
    color: var(--ts-gray-800);
    cursor: pointer;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

/* ==========================================================================
   Variations
   ========================================================================== */

/**
 * Active
 */

.ts-pagination .item.is-active {
    background: var(--accent-color, var(--ts-gray-800));
    color: var(--accent-foreground-color, var(--ts-gray-50));
    pointer-events: none;
}

/**
 * Relaxed
 */

.ts-pagination.is-relaxed {
    --horizontal-padding-multiplier: 2;
}

/**
 * Skipped
 */

.ts-pagination .item.is-skipped {
    padding: 0.5rem 0rem;
    color: var(--ts-gray-600);
    pointer-events: none;
}

.ts-pagination .item.is-skipped::after {
    display: inline-block;
    content: "...";
}

/**
 * Fluid
 */

.ts-pagination.is-fluid {
    display: flex;
}

/**
 * Disabled
 */

.ts-pagination .item.is-disabled,
.ts-pagination .item:disabled {
    opacity: 0.5;
    pointer-events: none;
    user-select: none;
}

/**
 * Aligns
 */

/*.ts-pagination.is-end-aligned {
    margin-left: auto;
}*/

/**
 * Next & Back
 */

.ts-pagination .item.is-back,
.ts-pagination .item.is-next,
.ts-pagination .item.is-first,
.ts-pagination .item.is-last {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.ts-pagination .item.is-back::before,
.ts-pagination .item.is-next::after,
.ts-pagination .item.is-first::before,
.ts-pagination .item.is-last::after {
    font-family: "Icons";
    font-weight: normal;
    font-style: normal;
    text-decoration: inherit;
    text-align: center;
    -webkit-font-smoothing: antialiased;
    backface-visibility: hidden;
    font-size: 13px;
}

.ts-pagination .item.is-back::before {
    content: "\f053";
}
.ts-pagination .item.is-next {
    margin-left: auto;
}
.ts-pagination .item.is-next::after {
    content: "\f054";
}
.ts-pagination .item.is-first::before {
    content: "\f048";
}
.ts-pagination .item.is-last::after {
    content: "\f051";
}

/**
 * Secondary
 */

.ts-pagination.is-secondary {
    padding: 0;
    background: transparent;
    border-color: transparent;
}

/**
 * Outlined
 */

.ts-pagination.is-outlined {
    padding: 0;
    background: transparent;
    border-color: transparent;
    gap: calc(0.45rem * var(--horizontal-padding-multiplier));
}

.ts-pagination.is-outlined .item {
    border: 1px solid var(--ts-gray-300);
}
.ts-pagination.is-outlined .item:is(.is-back, .is-next, .is-first, .is-last, .is-skipped) {
    border: 0;
}
.ts-pagination.is-outlined .item.is-active {
    background: inherit;
    color: inherit;
    font-weight: 500;
    border-color: transparent;
}

/**
 * Sizes
 */

.ts-pagination.is-small {
    font-size: var(--ts-font-size-13px);
}

.ts-pagination.is-large {
    font-size: var(--ts-font-size-17px);
}

/**
 * Dense
 */

.ts-pagination.is-dense {
    padding-top: 0.15rem;
    padding-bottom: 0.15rem;
}

.ts-pagination.is-dense .item {
    padding-top: 0.3rem;
    padding-bottom: 0.3rem;
}
