@use '@mskcc/themes/tokens' as tk;
@use '@carbon/styles/scss/config' as *;
@use '@mskcc/fundamentals/src/_variables.scss' as v;
@use '@mskcc/fundamentals/src/_mixins.scss' as m;
@use '@mskcc/colors' as c;
@use '@carbon/styles/scss/components/pagination';
@use '@carbon/styles/scss/components/pagination-nav';

$msk--pagination-border-color: tk.$msk--color-border;
$msk--pagination-height-sm: m.msk-rem(32px);
$msk--pagination-height-md: m.msk-rem(40px);
$msk--pagination-height-lg: m.msk-rem(48px);

@mixin msk-pagination {
    // inner label text
    span.#{$prefix}--pagination__text.#{$prefix}--pagination__items-count {
        --#{$prefix}-text-secondary: #{tk.$msk--color-content-primary};
    }
    .#{$prefix}--pagination__right {
        --#{$prefix}--border-subtle: #{tk.$msk--color-border};
        -webkit-border-start: 1px solid tk.$msk--color-border;
    }

    // outside wrapper
    .#{$prefix}--pagination {
        background-color: tk.$msk--color-bg-input;
        border: 1px solid $msk--pagination-border-color;
        border-radius: m.msk-rem(4px);
        color: tk.$msk--color-content-primary;
        font-size: v.$msk--size-2;
        min-height: m.msk-rem(32px);
    }

    // first label
    .#{$prefix}--pagination__left .#{$prefix}--pagination__text {
        margin-right: m.msk-rem(16px);
    }

    // count dropdown
    .#{$prefix}--pagination
        .#{$prefix}--select__item-count
        .#{$prefix}--select-input {
        --#{$prefix}-border-subtle: #{$msk--pagination-border-color};

        border-left: 1px solid $msk--pagination-border-color;
    }
    .#{$prefix}--pagination .#{$prefix}--select-input:hover {
        --#{$prefix}-layer-hover: transparent;
    }

    .#{$prefix}--pagination
        .#{$prefix}--select--inline
        .#{$prefix}--select-input:focus,
    .#{$prefix}--pagination
        .#{$prefix}--select--inline
        .#{$prefix}--select-input:focus
        option,
    .#{$prefix}--pagination
        .#{$prefix}--select--inline
        .#{$prefix}--select-input:focus
        optgroup {
        --#{$prefix}-layer: transparent;
    }
    // pagination dropdown
    .#{$prefix}--pagination .#{$prefix}--select--inline {
        .#{$prefix}--select-input {
            border-top: none;
            border-bottom: none;
            border-left: 1px solid $msk--pagination-border-color;
            border-right: 1px solid $msk--pagination-border-color;
            border-radius: 0;
            line-height: 1;

            &:focus:not(disabled),
            &:focus:hover:not(disabled),
            &:active:not(disabled) {
                border-radius: 0;
            }
        }
    }

    .#{$prefix}--pagination__right .#{$prefix}--pagination__text {
        margin-right: m.msk-rem(16px);
        margin-left: m.msk-rem(16px);
    }

    // control buttons
    .#{$prefix}--pagination__control-buttons {
        border-left: 1px solid $msk--pagination-border-color;
        position: relative;

        .msk-pagination--button-backward {
            border-radius: 0;
            &:not(:disabled) {
                color: tk.$msk--color-content-action;
            }
        }

        .msk-pagination--button-forward {
            border-radius: 0 m.msk-rem(3px) m.msk-rem(3px) 0;
            color: tk.$msk--color-content-action;
        }

        &::after {
            background-color: $msk--pagination-border-color;
            content: '';
            height: 100%;
            left: 50%;
            position: absolute;
            top: 0;
            transform: translateX(-50%);
            width: 1px;
        }

        .#{$prefix}--pagination__button,
        .#{$prefix}--btn--ghost.#{$prefix}--pagination__button {
            @include m.msk-btn-ghost;

            &:disabled {
                color: tk.$msk--color-content-disabled;
            }
        }

        .#{$prefix}--pagination__button:focus,
        .#{$prefix}--btn--ghost:focus.#{$prefix}--pagination__button {
            outline: none;

            @include m.msk-edge-input-focus($radius: 0);
        }

        .#{$prefix}--icon-tooltip:last-child {
            .#{$prefix}--pagination__button {
                border-bottom-right-radius: m.msk-rem(4px);
                border-top-right-radius: m.msk-rem(4px);
            }

            .#{$prefix}--pagination__button:focus,
            .#{$prefix}--btn--ghost:focus.#{$prefix}--pagination__button {
                @include m.msk-edge-input-focus($radius: 0 4px 4px 0);
            }
        }
    }
    /*---------------------------------
    # Sizes
    ---------------------------------*/
    .#{$prefix}--pagination {
        &.#{$prefix}--pagination--sm {
            height: $msk--pagination-height-sm;

            .msk-pagination--button {
                width: m.msk-rem(32px - 2px);
                height: m.msk-rem(32px - 2px);
                min-height: m.msk-rem(32px - 2px);
            }
        }
        &.#{$prefix}--pagination--md {
            height: $msk--pagination-height-md;

            .msk-pagination--button {
                width: m.msk-rem(40px - 2px);
                height: m.msk-rem(40px - 2px);
                min-height: m.msk-rem(40px - 2px);
            }
        }
        &.#{$prefix}--pagination--lg {
            height: $msk--pagination-height-lg;

            .msk-pagination--button {
                width: m.msk-rem(48px - 2px);
                height: m.msk-rem(48px - 2px);
                min-height: m.msk-rem(48px - 2px);
            }
        }
    }
}

@mixin msk-pagination-nav {
    @include pagination-nav.pagination-nav;
    .#{$prefix}--pagination-nav {
        background-color: transparent;
        border: 1px solid $msk--pagination-border-color;
        border-radius: m.msk-rem(4px);
        color: tk.$msk--color-content-action;
        font-size: v.$msk--size-2;
        width: fit-content;

        // default icon colors
        .#{$prefix}--btn--ghost:not([disabled]) svg {
            fill: tk.$msk--color-content-action;
        }
    }

    .#{$prefix}--pagination-nav__list {
        padding: 0;
    }

    // arrows on either end
    .cds--icon-tooltip {
        .#{$prefix}--btn--ghost {
            --#{$prefix}-button-focus-color: #{c.$msk--white-0};

            @include m.msk-btn-ghost;

            &:disabled {
                color: v.$msk--input-disabled-label-color;
            }

            &:focus {
                box-shadow: 0 0 0 m.msk-rem(2px) c.$msk--black-100,
                    0 0 0 m.msk-rem(4px) c.$msk--white-0;
                outline: none;
            }
        }
    }

    .#{$prefix}--pagination-nav__list-item {
        &:first-child {
            border-right: 1px solid $msk--pagination-border-color;

            .cds--icon-tooltip {
                .#{$prefix}--btn--ghost {
                    border-bottom-left-radius: m.msk-rem(4px);
                    border-top-left-radius: m.msk-rem(4px);
                }
            }
        }

        &:last-child {
            border-left: 1px solid $msk--pagination-border-color;

            .cds--icon-tooltip {
                .#{$prefix}--btn--ghost {
                    border-bottom-right-radius: m.msk-rem(4px);
                    border-top-right-radius: m.msk-rem(4px);
                }
            }
        }
    }

    // page buttons
    .#{$prefix}--pagination-nav__page {
        @include m.msk-edge-btn-ghost;
        @include m.msk-edge-input-focus($radius: 0);

        color: tk.$msk--color-content-action;

        &:focus {
            outline: none;
        }

        &.#{$prefix}--pagination-nav__page--active {
            --#{$prefix}-text-color-active: #{tk.$msk--color-content-action-selected};
            --#{$prefix}-text-primary: #{tk.$msk--color-content-action-selected};

            font-weight: 500;

            &::after {
                --#{$prefix}-border-interactive: #{tk.$msk--color-content-action-selected};

                border-top-left-radius: 2rem;
                border-top-right-radius: 2rem;
            }
        }
    }
    .msk-pagination-nav--button-backward {
        border-radius: m.msk-rem(3px) 0 0 m.msk-rem(3px);
        &:not(:disabled) {
            color: tk.$msk--color-content-action;
        }
    }
    .msk-pagination-nav--button-forward {
        border-radius: 0 m.msk-rem(3px) m.msk-rem(3px) 0;
        color: tk.$msk--color-content-action;
    }
}