//
//  Common
//  _____________________________________________

& when (@media-common = true) {
    .toolbar-amount {
        color: @djo-gray;
        font-family: @heading__font-family__base;
        .lib-font-size(18);
        line-height: 1;
        position: static;
    }
    .page-products {
        .limiter .label,
        .limiter-text,
        .sorter-label {
            .lib-visually-hidden();
        }
    }
    .toolbar {
        box-sizing: border-box;
        .limiter-options,
        .sorter-options {
            background-color: #fff;
            background-position-x: 92%;
            border-color: @djo-toolbar-sorter-border-color;
            border-radius: 30px;
            box-shadow: none;
            color: @djo-gray;
            font-family: @font-family__base;
            height: 40px;
            line-height: 1;
            margin-left: 0;
            padding: 1px 20px 0;
            text-transform: uppercase;
            width: 200px;
        }
        .sorter-action {
            &::before {
                content: url('../images/toolbar-arrow.svg');
                opacity: .5;
                position: absolute;
                right: -17px;
                top: 50%;
                -webkit-transform: translateY(-50%);
                        transform: translateY(-50%);
            }
            &.sort-desc {
                &::before {
                    -webkit-transform: translateY(-50%) rotate(180deg);
                            transform: translateY(-50%) rotate(180deg);
                }
            }
        }
    }
}


//
//  Mobile
//  _____________________________________________

.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) {
    // put a gray background around this as the "new toolbar"
    .toolbar {
        background-color: #ffffff;
        border: none;
        margin-bottom: 0;
        padding-bottom: 0;
        .limiter-options,
        .sorter-options {
            .lib-font-size(14);
        }
    }
    .toolbar-amount {
        .lib-font-size(18);
        padding-bottom: 0;
        padding-top: 0;
        text-align: center;
    }
    .page-products {
        .sorter {
            float: none;
            position: absolute !important;
            top: 0;
            right: 5%;
            width: 40%;
            .sorter-options {
                width:100%;
                opacity: .5;
            }
            .sorter-action {
                display: none;
            }
        }
        &.page-layout-1column {
            // @DO - flexbox reverses the order of the sorter and the toolbar amount
            .toolbar {
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                -webkit-box-direction: reverse;
                   -webkit-box-orient: vertical;
                   -ms-flex-direction: column-reverse;
                       flex-direction: column-reverse;
            }
            // @DO - on a 1-column layout, there's no layered navigation select box and no sidebar to fill space at the top, so absolute positioning is more of a hindrance here. easier to position statically and center instead
            .sorter {
                margin: 0 auto 15px;
                min-width: 200px;
                position: static !important;
            }
        }
    }
}


//
//  Desktop
//  _____________________________________________

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__s) {
    // "Gray out" the select box in the toolbar when not selected
    .toolbar .limiter-options,
    .toolbar .sorter-options {
        opacity: .75;
        &:focus {
            opacity: 1;
        }
    }
}

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {
    .toolbar-amount {
        .lib-visually-hidden();
        margin-bottom: 20px;
    }
    .products.wrapper + .toolbar .pages {
        float: none;
    }
    .products.wrapper + .toolbar .limiter {
        display: block;
    }
    .products.wrapper + .toolbar > .limiter {
        display: none;
    }
    .toolbar-sorter {
        display: block;
        padding: 0;
        border: none;
    }
    .page-products {
        .sorter {
            float: none;
            position: absolute !important;
            top: 21px;
            right: 205px;
        }
        .limiter {
            position: absolute;
            top: 21px;
            right: 20px;
        }
    }
    .toolbar .limiter-options,
    .toolbar .sorter-options {
        width: 140px;
    }

    .toolbar {
        background-color: @djo-toolbar-bg-color;
        border: 1px solid @djo-toolbar-border-color;
        margin-bottom: 0;
        padding-bottom: 31px;
        padding-left: 35px;
        padding-top: 31px;
        .limiter-options,
        .sorter-options {
            .lib-font-size(12.5);
        }
    }
    .toolbar-amount {
        .lib-font-size(18);
        .lib-visually-hidden-reset();
    }
    .toolbar-sorter {
        display: block;
    }
    // remove the gray background on the bottom toolbar
    .products-grid + .toolbar {
        background: none;
        border-bottom: none;
        border-left: 1px solid #dbdfe1;
        border-right: none;
        border-top: none;
    }
    // remove the border on 1-column layout
    .page-products.page-layout-1column {
        .products-grid + .toolbar {
            border-left: none;
        }
    }
    // the page number links and next page button
    .products.wrapper + .toolbar .pages {
        float: right;
    }
    .page-products .toolbar .limiter {
        display: block;
    }
}

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__l) {
    .toolbar .limiter-options,
    .toolbar .sorter-options {
        width: 200px;
    }
    .page-products {
        .sorter {
            right: 278px;
        }
        .limiter {
            right: 29px;
        }
    }
}