@use 'theme';
@use '../../settings/cursors';
@use '../../tools/reset';

.Pagination {
    display: inline-flex;
    gap: theme.$item-gap;
    list-style-type: none;
}

.Pagination__item {
    display: flex;
}

.Pagination__link {
    @include reset.button();

    display: flex;
    align-items: center;
    justify-content: center;
    min-width: theme.$item-min-width;
    height: theme.$item-height;
    padding-inline: theme.$item-padding-inline;
    font-weight: theme.$item-emphasis-font-weight;
    color: theme.$item-default-color;
    border-width: theme.$item-border-width;
    border-style: theme.$item-border-style;
    border-color: theme.$item-default-border-color;
    border-radius: theme.$item-border-radius;
    background-color: theme.$item-default-background-color;

    &:hover,
    &:focus {
        text-decoration: none;
        color: theme.$item-hover-color;
        border-color: theme.$item-hover-border-color;
        background-color: theme.$item-hover-background-color;
    }

    &:active {
        text-decoration: none;
        color: theme.$item-active-color;
        border-color: theme.$item-active-border-color;
        background-color: theme.$item-active-background-color;
    }
}

.Pagination__link--current,
.Pagination__link--current:hover,
.Pagination__link--current:focus,
.Pagination__link--current:active {
    color: theme.$item-selected-color;
    border-color: theme.$item-selected-border-color;
    background-color: theme.$item-selected-background-color;
    cursor: cursors.$disabled;
}
