//
//  Common
//  _____________________________________________

& when (@media-common = true) {
    .page-header {
        .header.content {
            // @DO - Some minicart styles are located here, whereas others are located in _cart.less. We should bring all of them together in one stylesheet.
            .minicart-wrapper {
                border-left: 1px solid @djo-header-border-color;
                margin-top: 0;
                .action.showcart {
                    background: transparent;
                    border: 0;
                    border-radius: 0;
                    position: relative;
                    text-align: center;
                    &::before {
                        background-image: url('../images/header/cart.svg');
                        background-position: center;
                        background-repeat: no-repeat;
                        content: '';
                        display: block;
                        height: 20px;
                        margin-bottom: 2px;
                        margin-left: auto;
                        margin-right: auto;
                        width: 20px;
                    }
                    .text {
                        color: @djo-gray;
                        font-weight: 700;
                        position: static;
                        text-transform: uppercase;
                    }
                    // @DO - This might be messing up the number input inside the minicart.
                    .counter.qty {
                        .lib-font-size(12);
                        background-color: @djo-blue;
                        border-radius: 10px;
                        font-weight: 600;
                        height: 17px;
                        left: 55%;
                        line-height: 17px;
                        padding: 0;
                        position: absolute;
                        top: 0;
                    }
                }
                .actions {
                    > .primary {
                        margin-left: 8px;
                        margin-right: 8px;
                    }
                }
            }
        }
    }
}


//
//  Mobile
//  _____________________________________________

.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__s) {
    .page-header {
        .header.content {
            .minicart-wrapper {
                width: 76px !important;
            }
        }
    }
}

.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m + 1) {
    .page-header {
        .header.content {
            .minicart-wrapper {
                width: 88px;
                .action.showcart {
                    .lib-font-size(10);
                    padding: 15px 9px;
                    width: 70px;
                }
            }
        }
    }
}


//
//  Desktop
//  _____________________________________________

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {
    .page-header {
        .header.content {
            .minicart-wrapper {
                float: unset;
                border-right: 1px solid @djo-header-border-color;
                margin-left: 0;
                width: 95px;
                .action.showcart {
                    .lib-font-size(14);
                    background: transparent;
                    border: 0;
                    border-radius: 0;
                    padding: 26.5px 0;
                    width: 95px;
                    .counter.qty {
                        top: 19px;
                    }
                }
            }
        }
    }
}