@import '../utilities/utilities.scss';

.azui {
    &.azPager {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 30px;
        box-sizing: border-box;
        border-left: 1px solid darken($color: $main-color, $amount: 10%);
        border-right: 1px solid darken($color: $main-color, $amount: 10%);
        border-bottom: 1px solid darken($color: $main-color, $amount: 10%);
        background-color: $main-color;
        border-top: 1px solid silver;
        padding: 0 10px;
        font-size: 12px;

        & a.azPageIcon {
            position: relative;
            top: 2px;
            margin-right: 15px;
            cursor: pointer;

            &>svg {
                width: 12px;
                height: 12px;
                fill: $gray-text;

                &:hover {
                    fill: lighten($color: $main-color, $amount: 20%);
                }

                &:active {
                    fill: darken($color: $main-color, $amount: 20%);
                }
            }
        }

        & input[type=number].pagerInput {
            // position: relative;
            // text-align: right;
            font-family: 'Roboto', sans-serif;
            font-size: 13px;
            margin-right: 5px;
            width: 40px; // top: -2px;
            -moz-appearance: textfield;

            &::-webkit-outer-spin-button,
            &::-webkit-inner-spin-button {
                -webkit-appearance: none;
                margin: 0;
            }
        }

        & .azPageInfo {
            color: $gray-text;
            white-space: nowrap;
        }

        @media screen and (orientation:portrait) {
            & .azWideScreen {
                display: none;
            }
        }
    }
}