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

//
//  Common
//  _____________________________________________

@toolbar-mode-icon-font-size: 24px;
@toolbar-element-background: @panel__background-color;

& when (@media-common = true) {

    .page-products {
        .columns {
            padding-top: 60px; // New
            position: relative;
            z-index: 1;
        }
    }

    .toolbar {
        &:extend(.abs-add-clearfix all);
        &-amount {
            display: block;
            line-height: 32px;
            //line-height: @toolbar-mode-icon-font-size+2;
            margin: 0;
            padding: 8px 0 0;
            vertical-align: middle;
            .products.wrapper ~ .toolbar & {
                display: none;
            }
        }
        &-products {
            // New: 
            // Important: this margin value maches bottom padding of sidebar block title so bottom line of the toolbar
            // is on the same level as bottom line of the topmost sidebar block title.
            margin-bottom: 14px;
            // margin-bottom: @indent__xl;
            // padding: 0 @indent__s;
            // text-align: center;
            &:extend(.abs-add-clearfix all);
            .pages {
                display: none;
                .products.wrapper ~ & {
                    display: block;
                }
            }
            .limiter {
                display: none;
                .control {
                    display: inline-block;
                }
            }
        }
    }

    // New: add margin above bottom toolbar
    .products.wrapper + .toolbar {
        margin-top: 20px;
    }

    .sorter {

        // New:
        // Position sorter on product listing page.
        // Copied from Luma theme.
        float: right;
        .page-products & {
            position: absolute;
            right: 0;
            top: 0;
            z-index: 1;
        }

        // New:
        padding: 8px 0 0; // Push sorter closer to the bottom of the toolbar
        // padding: 4px 0 0;

        .products.wrapper ~ .toolbar & {
            display: none;
        }
        &-options {
            margin: 0 0 0 7px;
            width: auto;
        }
        &-action {
            vertical-align: top;

            // New:
            width: 32px;
            text-align: center;

            // New: removed icon colors from the icon mixin
            .lib-icon-font(
            @icon-arrow-up,
            @_icon-font-size: 28px,
            @_icon-font-line-height: 32px,
            @_icon-font-text-hide: true
            );
            // .lib-icon-font(
            // @icon-arrow-up,
            // @_icon-font-size: 28px,
            // @_icon-font-line-height: 32px,
            // @_icon-font-color: @header-icons-color,
            // @_icon-font-color-hover: @header-icons-color-hover,
            // @_icon-font-text-hide: true
            // );

            &.sort-desc:before {
                content: @icon-arrow-down;
            }
        }
    }

    .modes {
        display: none;
    }

    .limiter {
        &-options {
            width: auto;
            margin: 0 5px 0 7px;
        }
        &-label {
            font-weight: 400;
        }
        .page-products .toolbar & {
            display: none;
        }
    }
}

//
//  Mobile
//  _____________________________________________

//  New:

.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) {
    .toolbar-products {
        margin-bottom: @indent__s;
        padding: 0;
        //padding: 0 @indent__s;
    }

    // New: decrease the margin on mobile
    .sorter-options {
        margin-left: 3px;
    }
}

//
//  Desktop
//  _____________________________________________

// New: replaced @screen__s with @screen__m

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {
    .page-products {
        .columns {
            padding-top: 0;
            position: relative;
            z-index: 1;
        }
    }

    .toolbar {
        .products.wrapper ~ & .pages {
            float: left;
        }
    }

    .toolbar-amount {
        float: left;
    }

    // New: floating moved to common
    // .sorter {
    //     float: right;
    // }

    // New:
    .sorter {
        .page-products & {
            position: static;
        }
    }

    .modes {
        display: inline-block;
        float: left;
        margin-right: @indent__base;

        // New:
        padding: 8px 0 0; // Push modes closer to the bottom of the toolbar

        .products.wrapper ~ .toolbar & {
            display: none;
        }
    }

    .modes-label {
        &:extend(.abs-visually-hidden-desktop all);
    }

    .modes-mode {
        //.lib-css(color, @text__color__muted);
        //border: 1px solid @border-color__base;
        //border-right: 0;
        float: left;
        font-weight: @font-weight__regular;
        line-height: 1;
        padding: 4px 10px;
        //padding: 7px 10px;
        text-align: center;

        // &:not(.active) {
        //     &:hover {
        //         .lib-css(color, @text__color__muted);
        //         background: darken(@toolbar-element-background, 7%);
        //     }
        // }

        // &:last-child {
        //     border-right: 1px solid @border-color__base;
        // }

        // &.active {
        //     .lib-css(color, @primary__color__light);
        // }

        .lib-icon-font(
        @icon-grid,
        @_icon-font-size: @toolbar-mode-icon-font-size,
        @_icon-font-text-hide: true,
        @_icon-font-color: @text__color__muted,
        @_icon-font-color-hover: @text__color__muted
        );
    }

    .mode-list {
        .lib-icon-font-symbol(@icon-list);
    }

    .limiter {
        float: right;

        .products.wrapper ~ .toolbar & {
            display: block;
        }
    }
}
