//
//  Common
//  _____________________________________________

& when (@media-common = true) {
    .page-header {
        .header.content {
            .header-account {
                border-left: 1px solid @djo-header-border-color;
                float: right;
                position: relative;
                text-align: center;
                .header-account-link {
                    background: transparent;
                    border: 0;
                    border-radius: 0;
                    color: @djo-gray;
                    display: block;
                    font-weight: 700;
                    line-height: 1;
                    text-transform: uppercase;
                    &::before {
                        background-image: url('../images/header/account.svg');
                        background-position: center center;
                        background-repeat: no-repeat;
                        content: "";
                        display: block;
                        margin-bottom: 4px;
                        margin-left: auto;
                        margin-right: auto;
                        height: 20px;
                        width: 20px;
                    }
                    &:hover,
                    &:active {
                        text-decoration: none;
                    }
                }
                .header-account-dialog {
                    display: none;
                    &::before {
                        border: 6px solid;
                        border-color: transparent transparent #ffffff transparent;
                        content: "";
                        display: block;
                        height: 0;
                        left: auto;
                        position: absolute;
                        right: 26px;
                        top: -12px;
                        width: 0;
                        z-index: 99;
                    }
                    &::after {
                        border: 7px solid;
                        border-color: transparent transparent #bbb transparent;
                        content: "";
                        display: block;
                        height: 0;
                        left: auto;
                        position: absolute;
                        right: 25px;
                        top: -14px;
                        width: 0;
                        z-index: 98;
                    }
                    .header.links {
                        .lib-list-reset-styles();
                        text-align: center;
                        li {
                            margin: 8px 0;
                        }
                        a {
                            color: @djo-gray;
                        }
                        .create-b2c-account,
                        .create-b2b-account,
                        .returning-b2b-account {
                            border-top: 1px solid @djo-header-border-color;
                            padding: 15px 0 1px;
                            margin: 15px 0;
                            span {
                                display: block;
                                margin: 6px 0;
                            }
                        }
                        .sign-in {
                            margin: 0;
                            a {
                                .lib-font-size(14);
                                color: #fff;
                                width: 100%;
                                // because clicking on the account to show the drop down gives the button focus for some reason
                                &:focus,
                                &:active {
                                    background: @djo-blue;
                                    border: 1px solid @djo-blue;
                                }
                            }
                        }
                        .sign-up,
                        .provider-login {
                            text-decoration: underline;
                        }
                        .sign-out {
                            border-top: 1px solid @djo-header-border-color;
                            padding: 15px 0 0;
                            margin: 15px 0 0;
                        }
                        .phone {
                            font-weight: 700;
                        }
                        .learn-more {
                            display: inline-block;
                            margin-top: 4px;
                            text-decoration: underline;
                        }
                        li:first-child {
                            margin-top: 0;
                        }
                        li:last-child {
                            margin-bottom: 0;
                            padding-bottom: 0;
                        }
                    }
                }
                &.active .header-account-dialog {
                    background: #fff;
                    border: 1px solid #bbb;
                    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.15);
                    margin-top: 4px;
                    padding: 25px 20px;
                    position: absolute;
                    right: 0;
                    top: 100%;
                    width: 200px;
                    z-index: 100;
                }
            }
        }
    }
}


//
//  Mobile
//  _____________________________________________

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

.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m + 1) {
    .page-header {
        .header.content {
            .header-account {
                width: 70px;
                .header-account-link {
                    .lib-font-size(10);
                    padding: 15px 0 17px;
                }
            }
        }
    }
}


//
//  Desktop
//  _____________________________________________

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {
    .page-header {
        .header.content {
            .header-account {
                float: unset;
                width: 95px;
                .header-account-link {
                    .lib-font-size(14);
                    padding: 28px 0;
                }
            }
        }
    }
}