@use 'admiral/assets/mixins' as *;
@import '../Input/Input.module.scss';

$prefix-class: 'pagination';

.pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: var(--pagination-horizontal-align, flex-start);
    align-items: center;
    gap: var(--space-2xs);
    width: 100%;
    color: var(--color-control-typo-ghost);
    --pagination-input-size-m: calc(var(--space-3xl) + 2px);
    --pagination-control-height: var(--control-height-s);
    --pagination-control-fz: var(--control-text-size-s);
    --pagination-control-radius: var(--control-radius);
    --pagination-button-padding: var(--space-3xs) var(--space-2xs);
    input {
        @extend .input;
        @extend .wrapper;
        width: var(--pagination-input-size-m);
        height: var(--control-height-s);
        border-radius: var(--input-bradius, var(--control-radius));
        text-align: center;
        padding: 0;
        font-size: var(--control-text-size-s);
        background: var(--color-control-bg-default);
    }

    &__Small {
        --pagination-control-height: var(--control-height-xs);
        --pagination-control-fz: var(--control-text-size-xs);
        font-size: var(--control-text-size-xs);
        input {
            height: var(--control-height-xs);
            font-size: var(--control-text-size-xs);
        }

        &:global(.#{$prefix-class}-simple) {
            :global {
                font-size: var(--control-text-size-s);
            }
        }
    }

    &:global(.#{$prefix-class}-disabled) {
        opacity: 0.6;
        pointer-events: none;
    }

    :global {
        & .#{$prefix-class} {
            &-item,
            &-prev,
            &-next,
            &-jump-prev,
            &-jump-next {
                --pagination-control-color: var(--color-control-typo-default);
                --pagination-control-bcolor: var(--color-control-bg-border-default);
                --pagination-control-bcolor-hover: var(--color-control-bg-border-default-hover);
                --pagination-control-bg: var(--color-control-bg-default);
                border-radius: var(--pagination-control-radius);

                &-active {
                    --pagination-control-color: var(--color-control-bg-primary);
                    --pagination-control-bcolor: var(--color-control-bg-primary);

                    & > * {
                        pointer-events: none;
                        cursor: default;
                    }
                }

                &:focus-visible {
                    outline: none;
                    --pagination-control-bcolor: var(--color-control-bg-border-focus);
                    & :local {
                        animation: animFocus 0.4s ease-in both;
                    }
                }
            }
            &-options {
                display: flex;
                align-items: center;
                gap: 10px;

                &-quick-jumper {
                    min-width: fit-content;
                    display: flex;
                    align-items: center;
                    gap: 6px;
                }
            }
            &-total-text {
                margin-right: var(--space-xs);
            }

            &-disabled {
                opacity: 0.6;
            }
            &-simple {
                &-pager {
                    display: flex;
                    align-items: center;
                    gap: var(--space-xs);
                }
            }
        }
    }
    &:global(.#{$prefix-class}-simple) {
        :global {
            .#{$prefix-class} {
                &-prev,
                &-next {
                    --pagination-control-bcolor: transparent;
                    --pagination-control-bcolor-hover: transparent;
                }
            }
        }
    }
}

.page,
.control {
    display: flex;
    justify-content: center;
    align-items: center;
    width: auto;
    min-width: var(--pagination-control-height);
    height: var(--pagination-control-height);
    padding: var(--pagination-button-padding);
    font-size: var(--pagination-control-fz);
    line-height: 1;
    color: var(--pagination-control-color);
    background: var(--pagination-control-bg);
    border: 1px solid var(--pagination-control-bcolor);
    border-radius: var(--pagination-control-radius);
    transition: color 0.2s, border-color 0.2s, opacity 0.16s;

    @include noTouchHover() {
        border-color: var(--pagination-control-bcolor-hover);
    }
}

.control {
    position: relative;

    &:disabled {
        pointer-events: none;
        cursor: default;
        opacity: 0.6;
    }

    svg {
        width: auto;
        height: calc(var(--pagination-control-fz) + 2px);
        vertical-align: middle;
    }

    @include noTouchHover() {
        .control_Icon {
            opacity: 1;
            transform: scale(1);
        }

        .control_Ellipsis {
            opacity: 0;
            transform: scale(0.5);
        }
    }
}

.control_Icon {
    position: absolute;
    z-index: 1;
    display: flex;
    opacity: 0;
    transform: scale(0.5);
    transform-origin: 50% 50%;
    transition: opacity 0.16s, transform 0.2s linear;
}

.control_Ellipsis {
    position: absolute;
    z-index: 0;
    opacity: 1;
    display: flex;
    font-size: calc(var(--pagination-control-fz) - 2px);
    letter-spacing: 1px;
    transform: scale(1);
    transform-origin: 50% 50%;
    transition: opacity 0.16s, transform 0.2s linear;
}

@keyframes animFocus {
    from {
        box-shadow: 0 0 0 0 var(--color-control-bg-border-default),
            0 0 0 0 var(--color-control-bg-border-default);
    }

    to {
        box-shadow: 0 0 2px 0 var(--color-control-bg-border-focus), 0 0 0 3px transparent;
    }
}
