@import "..\..\default\styles\vars.less";

.wp-dashboard--header {
    .wp-account-nav .wp-mobile-menu {
        a{
	        color: white!important;
        }
    }

    .wp-logo--container {
        height: 60px;
        position: absolute;
        right: 0;
        left: 0;
        top: 3rem;
        padding-left: calc(1 * 100% / 12);
        padding-right: calc(1 * 100% / 12);
        box-sizing: border-box;

        .wp-logo {
            height: 100%;
            width: 100%;
            text-align: center;

            img{
                width: auto;
                max-width: 100%;
                max-height: 100%;
                z-index: 2;
                position: relative;
            }
        }
    }

    .wp-menu-logo {
        display: flex;
        align-items: center;
        height: 80px;

        img {
            max-height:48px;
            width: auto;
            height: auto;
        }
    }

    .wp-external-tool-menu {
        .wp-menu-theme {
            background-color: white;
            .wp-section-nav {
                background-color: inherit;
            }
        }
    }

    .wp-menu-container {
        height: 80px;
        box-shadow: 0 0 2px rgba(23,31,38,0.25);

        .wp-section-nav {
            float: right;
            box-shadow: none;
            padding-right: 0px;

            .wp-nav-items {
                text-align: left;

                .wp-content {
                    padding-left: 0px;
                    padding-right: 0px;

                    a {
                        &:last-of-type {
                            padding-right: 0px;
                          }
                    }
                }
            }

            .button {
                font-weight: bold;
            }
        }
    }
}

.wp-account-management {
	display: flex;
	align-items: center;
	height: 35px;
	margin-bottom: 0;
	
	li {
		font-size: 14px;
		padding: 10px;
		display: flex;
		align-items: center;
	}
	
	.wp-notifications {
		li {
			padding: 0;
		}
	}
	
	.wp-contactList {
		display: flex;
		align-items: center;
	}

	a:hover {
		text-decoration: none;
	}
	
	.button {
		padding: 0 1px 0 1px !important;
	}
}

.wp-mobile-menu {
	margin-bottom: auto;
	font-size: 14px;
}


.wp-dashboard--header .wp-account-nav .wp-mobile-menu {
    a {
        background-color: transparent;
        display: block !important;
    }
}

.wp-secure-messages-badge {
    border-radius: 50% !important;
    background: grey !important;
    color: white !important;
    display: inline-block !important;
    width: 23px;
    height: 23px;
}

.wp-secure-messages-badge-regular {
    .wp-secure-messages-badge();
	float: left;
    text-align: center;
    padding-top: 7px;
    margin-top: -7px;
    margin-bottom: -7px;
    @media (max-width: @screen-xs-max) {
        display: none !important;
    }
}

.wp-secure-messages-link-regular {
	@media (min-width: @screen-xs-max) {
        float: left;
		margin-left: 5px;
    }
}

.wp-secure-messages-badge-mobile {
    .wp-secure-messages-badge();
    padding-top: 4px;

    @media (min-width: @screen-sm-min) {
        display: none !important;
    }
}

.wp-secure-messages-button {
    margin-left: 0 !important;
	display: flex;
    align-items: center;

    @media (max-width: @screen-xs-max) {
        display: block !important;
        margin-top: 1px !important; // down from 3px
    }
}

.wp-signout-badge {
    .wp-secure-messages-badge();
    padding: 5px 6px !important;
    margin: 1px 4px !important;
    text-align: center;
}

.wp-signout-badge-mobile {
    .wp-signout-badge();
	padding: 5px 5px !important;
    margin: 1px 4px !important;
    @media (min-width: @screen-sm-min) {
        display: none !important;
    }
}


@media (max-width: 520px) {
    .wp-dashboard--header {
        .wp-menu-container {
            .wp-section-nav {
                .wp-nav-items {
                    text-align: center;
                }
            }
        }
    }
}

@media (min-width: @screen-sm-min) {
    .wp-dashboard--header {
        .wp-header-content {
            margin-top: 10rem;

            &.wp-black-bar{
                padding-left: 18px;
                padding-right: 18px;
                margin-top: 18em;

                h1{
                    display: inline-block;
                }
            }
        }
        .wp-section-nav{
            padding:20px;
        }
       .wp-section-nav .wp-flag {
            position: absolute;
            right: 0;
            width: 35%;
            max-width: 280px;
            margin: 0;
            top: -15px;
            box-shadow: 0 10px 40px -10px rgba(0,0,0,.5),0 20px 80px rgba(0,0,0,.25);
            height: 100px;
            bottom: auto;
            right: 2.5%;

            .wp-flag-content{
                webkit-transform: translateY(-50%);
                -moz-transform: translateY(-50%);
                -ms-transform: translateY(-50%);
                -o-transform: translateY(-50%);
                transform: translateY(-50%);
                position: absolute;
                top:50%;
            }
       }
        .wp-flag-container ~.wp-nav-items {
                width: calc(~"100% - 240px");
                text-align: left;
                margin-left: -30px;
            }

        .wp-section-nav .wp-nav-items{
            text-align: left;
            margin-left: -30px;
        }
       .wp-logo--container{
            top: 9rem;
            left: inherit;
            margin-top: -40px;
            height: 80px;

            .wp-logo{
                text-align: right;
            }
       }

        .wp-account-nav{
            padding: 6.67px;
        }
    }
}


@media (max-width: @screen-xs-max) {
    .wp-dashboard--header nav.wp-section-nav .wp-content{
        padding: 10px;
        .wp-nav-items {
            padding: 10px;
        }
     }
}

@media (min-width: 1200px) {
    header.wp-dashboard--header {
        .wp-header-content.wp-black-bar .wp-input-search {
            width: 35%;
        }
        .wp-logo--container {
            top: 14rem;
        }
    }
}