simple-pagination.scss

@use "@termehui/termeh/termeh.scss" as T;
@forward "@termehui/termeh/components/icon.scss";
@forward "@termehui/termeh/layout/gaper.scss";

.v-simple-pagination {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    user-select: none;
    overflow: hidden;

    > .vsp-pages {
        flex: 0 0 auto;
        display: flex;
        align-items: stretch;
        overflow: hidden;

        &:not(.is-empty) {
            background: T.color("input");
            border-radius: T.var("radius", "rounded");
            border: 1px solid T.variant("base", "separator");
        }

        .vsp-button {
            display: block;
            line-height: 1em;
            padding: T.control-padding();
            @include T.transition(all);

            &:not(.is-disabled) {
                cursor: pointer;

                .icon {
                    color: T.variant("shade", "readable");
                }

                &:hover {
                    background-color: T.variant("shade", "light");
                    color: T.variant("shade", "readable");
                }
            }

            &:first-child {
                border-right: 1px solid T.variant("base", "separator");
            }

            &.is-disabled {
                @include T.locked();
                background: none !important;
                color: T.variant("input", "disabled-color") !important;
            }
        }

        &.is-empty {
            padding: T.control-padding();
        }
    }

    @each $name, $color in T.colors(T.var("pagination", "colors", ())) {
        &.is-#{$name} {
            &:not(.is-disabled) > .vsp-pages > .vsp-button {
                &:not(.is-disabled) {
                    .icon {
                        color: T.variant($name, "readable");
                    }

                    &:hover {
                        background-color: T.variant($name, "light");
                        color: T.variant($name, "readable");
                    }
                }
            }
        }
    }

    &.is-disabled {
        .vsp-pages {
            @include T.disabled();
        }
    }

    &.is-rtl {
        .vsp-button {
            .icon {
                transform: scaleX(-1);
            }
        }
    }
}