pagination.scss

@use "~@carbon/react/scss/components/pagination/pagination";
@include pagination.pagination;

$eccgui-color-pagination-background: transparent !default;
$eccgui-color-pagination-text: $eccgui-color-workspace-text !default;
$eccgui-size-typo-pagination: $eccgui-size-typo-caption !default;
$eccgui-size-pagination-height-medium: $pt-button-height !default;
$eccgui-size-pagination-height-small: $pt-button-height-small !default;
$eccgui-size-pagination-height-large: $pt-button-height-large !default;
$eccgui-size-pagination-breakpoint-wide: 32rem !default;
$eccgui-size-pagination-breakpoint-small: 26rem !default;

.#{$prefix}--pagination {
    min-block-size: $eccgui-size-pagination-height-medium;
    font-size: $eccgui-size-typo-pagination;
    background-color: $eccgui-color-pagination-background;

    .#{$prefix}--form-item,
    .#{$prefix}--select-input {
        text-overflow: clip;
        font-size: 100%;
    }
}

.#{$prefix}--pagination__left {
    padding: 0 $eccgui-size-block-whitespace * 0.5;
}

span.#{$prefix}--pagination__text {
    margin-inline-start: $eccgui-size-block-whitespace * 0.5;
    color: $eccgui-color-pagination-text;

    .#{$prefix}--pagination__right & {
        margin-inline-end: $eccgui-size-block-whitespace * 0.5;
    }
}

.#{$eccgui}-pagination--hidepagesize {
    .#{$prefix}--pagination__left {
        padding-left: 0;

        & > *:not(:last-child) {
            display: none;
        }
    }
}

.#{$prefix}--pagination__button--backward {
    .#{$prefix}--pagination:not(.#{$eccgui}-pagination--hidepageselect) & {
        border-left: 1px solid $border-subtle;
    }
}

.#{$prefix}--pagination__button--no-index {
    // TODO: revalidate if this is still necessary using the latest version of carbon lib
    color: eccgui-color-rgba($eccgui-color-workspace-text, $eccgui-opacity-disabled);
}

.#{$eccgui}-pagination--hideinfotext {
    .#{$prefix}--pagination__left > .#{$prefix}--pagination__text:last-child {
        display: none;
    }

    & .#{$prefix}--select__item-count .#{$prefix}--select-input {
        border-inline-end: none;
    }
}

.#{$eccgui}-pagination--hidepageselect {
    .#{$prefix}--pagination__right > *:not(.#{$prefix}--pagination__control-buttons) {
        display: none;
    }
}

.#{$eccgui}-pagination--hidenavigation {
    .#{$prefix}--pagination__right > .#{$prefix}--pagination__control-buttons {
        display: none;
    }
}

.#{$eccgui}-pagination--hideborders {
    border-top: none;

    .#{$prefix}--select__item-count .#{$prefix}--select-input {
        border-right: none;
    }

    .#{$prefix}--select__page-number .#{$prefix}--select-input {
        border-left: none;
    }

    .#{$prefix}--pagination__button {
        border-left: none;
    }

    .#{$prefix}--pagination__right {
        border-inline-start: none;
    }
}

// Fix pagination height, align it with button height
.#{$prefix}--pagination--sm {
    min-block-size: $eccgui-size-pagination-height-small;
}

.#{$prefix}--pagination--lg {
    min-block-size: $eccgui-size-pagination-height-large;
}

.#{$prefix}--pagination__button,
.#{$prefix}--btn--ghost.#{$prefix}--pagination__button {
    inline-size: $eccgui-size-pagination-height-medium;
    block-size: $eccgui-size-pagination-height-medium;
    min-block-size: $eccgui-size-pagination-height-medium;

    .#{$prefix}--pagination--sm & {
        inline-size: $eccgui-size-pagination-height-small;
        block-size: $eccgui-size-pagination-height-small;
        min-block-size: $eccgui-size-pagination-height-small;
    }

    .#{$prefix}--pagination--lg & {
        inline-size: $eccgui-size-pagination-height-large;
        block-size: $eccgui-size-pagination-height-large;
        min-block-size: $eccgui-size-pagination-height-large;
    }
}

.#{$prefix}--select-input {
    .#{$prefix}--pagination & {
        line-height: $eccgui-size-pagination-height-medium;
    }

    .#{$prefix}--pagination--sm & {
        line-height: $eccgui-size-pagination-height-small;
    }

    .#{$prefix}--pagination--lg & {
        line-height: $eccgui-size-pagination-height-large;
    }
}

// fix breakpoints for container queries
// Carbon does not provide the option to configure that breakpoint
@container pagination (min-width: #{$eccgui-size-pagination-breakpoint-small}) {
    .#{$prefix}--pagination.#{$eccgui}-pagination {
        .#{$prefix}--pagination__control-buttons {
            display: flex;
        }
        .#{$prefix}--pagination__text {
            display: inline-block;
        }
        .#{$prefix}--pagination__left > * {
            display: inherit;
        }
    }
}

@container pagination (min-width: #{$eccgui-size-pagination-breakpoint-wide}) {
    .#{$prefix}--pagination.#{$eccgui}-pagination {
        .#{$prefix}--pagination__right > * {
            display: inherit;
        }
    }
}

@container pagination (max-width: #{$eccgui-size-pagination-breakpoint-small}) {
    .#{$prefix}--pagination.#{$eccgui}-pagination {
        .#{$prefix}--pagination__left > * {
            display: none;
        }
    }
}

@container pagination (max-width: #{$eccgui-size-pagination-breakpoint-wide}) {
    .#{$prefix}--pagination.#{$eccgui}-pagination {
        .#{$prefix}--pagination__right > * {
            display: none;
        }

        .#{$prefix}--pagination__items-count {
            display: initial;
        }

        .#{$prefix}--pagination__control-buttons {
            display: flex;
        }
    }
}