//
//  Common
//  _____________________________________________

& when (@media-common = true) {
    .page-header {
        // @DO - backface-visibility improves the performance of the sticky header's transition to fixed positioning
        .sticky-wrapper {
            -webkit-backface-visibility: hidden;
                    backface-visibility: hidden;
            &.js-stuck {
                background-color: #fff;
                position: fixed;
                top: 0;
                width: 100%;
                z-index: 1000;
            }
        }
        .header.content {
            padding: 0;
            &.stuck {
                background-color: #fff;
            }

            .right-container {
                display: flex;
                float: right;
            }
        }
    }
}


//
//  Mobile
//  _____________________________________________

.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__s) {
    .page-header {
        .header.content {
            border-bottom-color: @djo-header-border-color;
            padding-left: 0;
            padding-right: 0;
            padding-top: 0;
        }

        .header-account,
        .minicart-wrapper {
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }
}


//
//  Desktop
//  _____________________________________________

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__s) {
    .page-header {
        .header.content {
            border-bottom-color: @djo-header-border-color;
            padding-left: @layout__width-xs-indent;
            padding-right: @layout__width-xs-indent;
            padding-top: 0;
        }
    }
}

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {
    .page-header {
        .header.content {
            padding-left: 0;
            padding-right: 0;
            padding-top: 0;
            .left-container {
                float: left;
            }
            .middle-container {
                display: block;
                float: left;
                margin-left: 24px;
            }
        }
    }
}

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__l) {
    .page-header {
        .header.content {
            padding-left: @layout__width-xs-indent;
            padding-right: @layout__width-xs-indent;
            padding-top: 0;
        }
    }
}

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__1240) {
    .page-header {
        .header.content {
            .right-container {
                float: right;
            }
        }
    }
}