@use '~flux/components/css/mixin';

.pagination {
    display: flex;
    gap: 1px;
}

.paginationButton {
    composes: secondaryButton from './Button.module.scss';

    height: 36px;
    min-width: 36px;
    padding: 0 6px;
    background: unset;

    &:local(.secondaryButton) {
        border-color: transparent;
        box-shadow: none;
    }
}

.paginationButtonArrow {
    width: 36px;

    &:local(.secondaryButton) {
        border-color: var(--surface-stroke);
    }

    &:first-child {
        margin-right: 6px;
    }

    &:last-child {
        margin-left: 6px;
    }
}

.paginationButton.paginationButtonCurrent {
    background: var(--primary-50);
    border-color: var(--primary-200);
}

.paginationDots {
    @include mixin.text(2xsmall);

    display: flex;
    align-items: center;
    justify-content: center;

    height: 36px;
    min-width: 36px;
    padding: 0 6px;

    color: var(--foreground-secondary);

    pointer-events: none;
    user-select: none;
}

.paginationButtonIcon {
    composes: secondaryButtonIcon from './Button.module.scss';

    font-size: 16px;
}

.paginationButtonLabel {
    composes: secondaryButtonLabel from './Button.module.scss';

    @include mixin.text(2xsmall);

    margin: 0;
    min-width: unset;
}

.paginationBar {
    display: flex;
    align-items: center;
    flex-flow: row;
}

.paginationBarLimit {
    display: flex;
    align-items: center;
    flex-flow: row;
    gap: 15px;
}

.paginationBarLimitDisplayingOf {
    @include mixin.text(2xsmall);

    font-weight: 600;
}

.paginationBarLimitSelect {
    min-height: 36px;
    width: 120px;

    .menuItem {
        min-height: 36px;
    }

    .menuItemLabel {
        @include mixin.text(2xsmall);

        font-weight: 600;
    }
}

@include mixin.breakpoint-down(sm) {
    .paginationBar {
        flex-flow: column;
        gap: 9px;
    }
}