// /**
//  * Copyright © Magento, Inc. All rights reserved.
//  * See COPYING.txt for license details.
//  */

//
//  Common
//  _____________________________________________

& when (@media-common = true) {
    .pages {
        .lib-pager();
        text-align: center;
        .action{
            &.previous,
            &.next {
                .lib-icon-text-hide();
                display: inline-block;
                height: 100%;
                width: 100%;
                position: relative;
                &:before,
                &:after{
                    content: '';
                    display: inline-block;
                    width: 2px;
                    height: 8px;
                    background: #000000;
                    position: absolute;
                }
                &:before{
                    transform: rotate(-45deg);
                    top: 12px;
                    left:17px;
                }
                &:after{
                    transform: rotate(45deg);
                    top: 17px;
                    left:17px;
                }
            }
            &.previous {
                &:before{
                    transform: rotate(45deg);
                        margin-left: -1px;
                }
                &:after{
                    transform: rotate(-45deg);
                        margin-left: -1px;
                }
            }
        }
        .item {
            .lib-css(width, @pager-item-size);
            .lib-css(height, @pager-item-size);
            font-weight:700;
            font-family:@main-font;
            position: relative;
            text-align:center;
            vertical-align:middle;
            &:after{
                content: '';
                background: #eaeaea;
                width: 100%;
                height: 2px;
                display: block;
                position: absolute;
                bottom: 0;
                z-index: -1;
                transition: all .2s;
            }
            &:hover{
                &:after{
                    height: 100%;
                    transition: all 50ms;
                }
            }
            .page{
                height: 100%;
                width: 100%;
            }
        }
    }
}