& when (@media-common = true) {
    .page-header {
        .header.content {
            .minicart-wrapper.minicart-wrapper-off-canvas {
                // @DO - !important overrides JS in order to allow for the slide-out effect
                .ui-dialog {
                    display: block !important;
                }
                .block-minicart {
                    border: none;
                    border-left: 1px solid @djo-gray-lighter;
                    height: 100%;
                    margin-top: 0;
                    min-width: 0;
                    padding-bottom: 0;
                    padding-top: 0;
                    position: fixed;
                    right: -500px;
                    top: 0;
                    -webkit-transition: right .3s ease;
                    transition: right .3s ease;
                    z-index: 9999;

                    .subtotal {
                        color: @djo-gray;
                        margin: 0 3px;
                        padding-bottom: 10px;
                        padding-top: 15px;
                        text-align: left;
                        // @DO - fixes white space issue affecting Knockout comment
                        // between the label and the colon in the after pseudo-element
                        .label {
                            font-size: 0;
                            span,
                            &::after {
                                .lib-font-size(16);
                            }
                        }
                    }
                    .amount {
                        display: inline-block;
                        .price-wrapper:first-child .price {
                            .lib-font-size(16);
                        }
                    }
                    .block-content > .actions {
                        display: -webkit-flex;
                        display:  -webkit-box;
                        display:  -ms-flexbox;
                        display:         flex;
                        -webkit-flex-wrap: wrap;
                        -ms-flex-wrap: wrap;
                        flex-wrap: wrap;
                        font-size: 0;
                        -webkit-justify-content: space-between;
                        -webkit-box-pack: justify;
                        -ms-flex-pack: justify;
                        justify-content: space-between;
                        // @DO - negative margin counteracts the margin-right on
                        // each button
                        margin: 0 -10px 0 0;
                        > .primary,
                        > .secondary {
                            -webkit-box-flex: 1;
                            -webkit-flex: 1 0 auto;
                            -ms-flex: 1 0 auto;
                            flex: 1 0 auto;
                            margin: 0 10px 10px 0;
                            min-width: calc(~'50% - 10px');
                        }
                        > .primary .action.primary,
                        > .secondary .action.viewcart {
                            font-size: @button__font-size;
                            padding: 8px 17px;
                            width: 100%;
                        }
                    }
                }
                &.active {
                    .block-minicart {
                        right: 0;
                    }
                }
                .action.close {
                    right: 5px;
                    &::before {
                        font-size: 24px;
                        line-height: 24px;
                    }
                }
                .minicart-items-wrapper {
                    -webkit-box-sizing: border-box;
                    box-sizing: border-box;
                    ~ .actions,
                    ~ .minicart-widgets {
                        display: none;
                    }
                }
                .items-total {
                    background-color: @djo-gray-lightest;
                    color: @djo-gray;
                    float: none;
                    margin-left: -22px;
                    margin-right: -22px;
                    padding: 10px 22px;
                    text-align: center;
                    width: 100%;
                }
            }
        }
    }
}

//
//  Mobile
//  _____________________________________________

.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) {
    .page-header {
        .header.content {
            .minicart-wrapper.minicart-wrapper-off-canvas {
                .block-minicart {
                    .block-content > .actions {
                        > .primary .action.primary {
                            line-height: 1.7rem;
                        }
                        > .secondary .action.viewcart {
                            line-height: 1.7rem;
                        }
                    }
                }
                .minicart-items-wrapper {
                    height: calc(~'100vh - 166px');
                }
            }
        }
    }
}


//
//  Desktop
//  _____________________________________________

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {
    .page-header {
        .header.content {
            .minicart-wrapper.minicart-wrapper-off-canvas {
                .block-minicart {
                    .block-content > .actions {
                        > .primary .action.primary {
                            line-height: 2rem;
                        }
                        > .secondary .action.viewcart {
                            line-height: 2rem;
                        }
                    }
                }
                .minicart-items-wrapper {
                    height: calc(~'100vh - 140px');
                }
            }
        }
    }
}