@import "./base/var";
@import "./mixins/index.scss";

@include c(page) {
    display: flex;
    align-items: center;

    @include e(common) {
        height: $--height-default;
        line-height: $--height-default;
        min-width: $--height-default;
        color: $--color-default;
        padding: 0 4px;
        text-align: center;
        cursor: pointer;
        display: inline-block;
        font-size: $--font-size-default;
        vertical-align: middle;
    }
    @include e(total) {

    }
    @include e(content) {

    }
    @include e(item) {
        transition: all $--animation-time;

        &:not(&-disabled):not(&-active):hover {
            color: $--color-primary;
        }
    }
    @include e(pre) {
        font-size: $--font-size-default;
    }
    @include e(next) {
        font-size: $--font-size-default;
    }
    @include e(item-first) {

    }
    @include e(item-final) {

    }
    @include e(item-jump-pre) {
        font-size: $--font-size-default;
        color: $--page-jump-color;
    }
    @include e(item-jump-next) {
        font-size: $--font-size-default;
        color: $--page-jump-color;
    }
    @include e(jump-to) {

    }
    @include e(jump-to-input) {
        display: inline-block;
        width: 50px;
        line-height: normal;
    }
    @include e(page-size) {

    }
    @include e(page-size-select) {
        display: inline-block;
        width: 100px;
        line-height: normal;
    }
    @include e(item-active) {
        color: $--color-primary;
    }
    @include e(item-disabled) {
        opacity: $--opacity-disabled;
        cursor: not-allowed;
    }


    @include m(mini) {
        @include e(common, false) {
            font-size: $--font-size-mini;
            height: $--height-mini;
            line-height: $--height-mini;
            min-width: $--height-mini;
        }
    }

    @include m(border) {
        @include e(item, false) {
            border: $--border-default;
            margin: 0 5px;
            border-radius: $--border-radius-default;
        }

        @include e(item-active, false) {
            border-color: $--border-color-primary;
        }
    }

    @include m(background) {
        @include e(item, false) {
            background-color: #f8f8f9;
            margin: 0 5px;
            border-radius: $--border-radius-default;
        }

        @include e(item-active, false) {
            background-color: $--color-primary;
            color: $--color-white;
        }
    }
}
