.pagination-container {
    display: flex;
    align-items: center;
}

.pagination-pages {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pagination-nav,
.pagination-page {
    box-sizing: border-box;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    block-size: 32px;
    max-inline-size: 100%;
    padding-inline: 10px;
    border: none;
    border-radius: var(--ds-radius-medium, 6px);
    background: transparent;
    font-family: inherit;
    font-size: 14px;
    font-style: normal;
    font-weight: var(--ds-font-weight-medium, 500);
    line-height: 32px;
    white-space: nowrap;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    color: var(--ds-text-subtle, #505258);
    cursor: pointer;
    transition:
        background-color 0.15s cubic-bezier(0.4, 1, 0.6, 1),
        border-color 0.15s cubic-bezier(0.4, 1, 0.6, 1),
        box-shadow 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38);

    &:hover {
        background: var(--ds-background-neutral-subtle-hovered, #0515240f);
    }

    &:active {
        background: var(--ds-background-neutral-subtle-pressed, #0b120e24);
    }

    &:focus-visible {
        outline: var(--ds-border-width-focused, 2px) solid var(--ds-border-focused, #4688ec);
        outline-offset: var(--ds-space-025, 2px);
    }
}

.pagination-nav {
    inline-size: 32px;
    padding-inline: var(--ds-space-0, 0);

    & svg {
        inline-size: 18px;
        block-size: 18px;
    }

    &:disabled,
    &.disabled {
        background: transparent;
        text-decoration: none;
        color: var(--ds-text-disabled, #080f214a);
        cursor: not-allowed;
    }
}

.pagination-page.active {
    background: var(--ds-background-selected, #e9f2fe);
    color: var(--ds-text-selected, #1868db);
    box-shadow: inset 0 0 0 var(--ds-border-width, 1px) var(--ds-border-selected, #1868db);

    &:hover,
    &:active {
        background: var(--ds-background-selected, #e9f2fe);
    }
}

.pagination-ellipsis {
    position: relative;
    display: flex;
    align-items: center;
    padding-inline: var(--ds-space-100, 8px);
    font: var(--ds-font-body, normal 400 14px/20px sans-serif);
    color: var(--ds-text, #292a2e);
}