@import '../../../node_modules/creative-patterns/packages/components/pagination/src/pagination';

.#{$namespace}pagination {
    $root: &;
    margin: 0;
    width: 100%;
    @include media('>=tablet') {
        width: auto;
    }

    .account & {
        width: 20rem;
        @include media('<phone-lg') {
            width: 100%;
        }
    }

    &__label-wrapper {
        display: inline-block;
        margin-right: 0.5rem;
    }

    &__label {
        @extend .#{$namespace}t-text;
        @extend .#{$namespace}t-text--look_label;
        @extend .#{$namespace}t-text--size_250;
    }

    &__item {
        margin: 0;
        display: inline-block;
        height: 3.8rem;
        width: 4rem;
        border: 1px solid $colorAlto;
        margin-left: -1px;
        background: $colorWhite;
        border-radius: 0;
        padding: 0;
        overflow: hidden;

        &:first-child {
            border-top-left-radius: 3px;
            border-bottom-left-radius: 3px;
        }

        &:last-child {
            border-top-right-radius: 3px;
            border-bottom-right-radius: 3px;
        }

        &--single {
            border-radius: 3px;
        }
    }

    &__number {
        display: inline-block;
        width: 100%;
        line-height: calc(4rem / 1.1);
        text-align: center;
        font-weight: 400;
        cursor: pointer;
        font-size: 1.2rem;
        color: $colorMineShaft;

        &--current {
            background: $colorGallery;
            box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15);
            cursor: default;
            color: $colorGray;
        }

        &:hover,
        &:focus {
            text-decoration: none;
            background: darken($colorGallery, 10%);
        }
    }

    &__separator {
        color: $colorGray;
        display: inline-block;
        vertical-align: top;
        padding: 1rem 1rem 0 0.3rem;
        width: 1.5rem;
        font-size: 1.2rem;
    }

    &__pager {
        margin: 0 0.2rem 0 0.5rem;
        padding: 0;
        list-style: none;
        display: flex;

        #{$root}__item {
            height: 3.5rem;
            width: 3.7rem;
            margin-left: -1px;
        }

        #{$root}__number {
            line-height: calc(3.9rem / 1.1);
        }
    }

    &__selector {
        &-input {
            display: inline-block;
            margin: 0 0.5rem;
            width: 5rem !important;
            height: 3.8rem !important;
            text-align: center;
            text-align-last: center;
            appearance: none;
        }
    }

    &__prev-icon {
        margin-right: 1rem;
    }

    &__next-icon {
        margin-left: 1rem;
    }

    &__prev-icon:not(&__prev-icon--disabled),
    &__next-icon:not(&__next-icon--disabled) {
        transition: fill 0.15s linear;
        fill: $colorCeruleanBlue;

        &:hover {
            fill: $colorCeruleanBlueHover;
        }
    }

    &__content {
        display: none;
        @include media('>=tablet') {
            display: flex;
        }

        .account & {
            @include media('<laptop') {
                display: flex;
                margin-left: 0;
            }
            @include media('<phone-lg') {
                width: 100%;
                margin-bottom: 2rem;
                justify-content: center;
            }
        }
    }

    &__content-mobile {
        width: 100%;
        padding: 3rem 2rem 0;

        @include media('>=tablet') {
            display: none;
        }

        .account & {
            display: none;
        }
    }
}