@import "dxHelpers/reset";

.dx-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0;
    width: min-content;
}

.dx-pagination dx-button {
    --dx-c-button-primary-color: transparent;
}

.dx-pagination.has-prev dx-button:first-of-type {
    --dx-c-button-primary-color: var(--dx-g-blue-vibrant-50);
}

.dx-pagination.has-next dx-button:last-of-type {
    --dx-c-button-primary-color: var(--dx-g-blue-vibrant-50);
}

.dx-pagination-pages {
    flex: 1;
    display: flex;
    justify-content: space-between;
}

.dx-pagination-pages button {
    padding: var(--dx-g-spacing-xs) var(--dx-g-spacing-md);
    border-radius: var(--dx-g-spacing-lg);
    font-family: var(--dx-g-font-display);
    font-size: var(--dx-g-text-sm);
    color: var(--dx-g-blue-vibrant-20);
    transition: var(--dx-g-transition-hue-1x);
    margin-left: var(--dx-g-spacing-sm);
}

.dx-pagination-pages button:last-child {
    margin-right: var(--dx-g-spacing-sm);
}

.dx-pagination-pages button:hover {
    background-color: var(--dx-g-cloud-blue-vibrant-95);
}

.dx-pagination-pages button.current-page {
    background-color: var(--dx-g-blue-vibrant-50);
    color: white;
}