@import "dxHelpers/reset";
@import "dxHelpers/text";

:host {
    z-index: var(--dx-g-z-index-500);
}

.header_l2_group-nav_overflow {
    position: relative;
    display: flex;
    align-items: center;
    height: 100%;
    width: 100%;
    transition: var(--dx-g-transition-hue-1x);
}

header {
    display: flex;
    flex-direction: column;
    width: 100%;
    position: relative;
    background: white;
}

header > *:not(dx-skip-nav-link) {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
}

header.state-show-mobile-nav .header_l2_group-nav_overflow {
    opacity: 0;
    pointer-events: none;
    overflow: hidden;
}

.subtitle {
    color: var(--dx-g-blue-vibrant-20);
}

/* First row */

.header_l1 {
    height: var(--dx-g-spacing-3xl);
    background: var(--dx-g-brand-current-color-background-2);
    padding: 0 var(--dx-g-global-header-padding-horizontal);
    position: relative;
}

.header-cta-container {
    flex-grow: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
}

/* Second row */

.header_l2 {
    padding: var(--dx-g-spacing-smd) var(--dx-g-spacing-lg)
        var(--dx-g-spacing-smd) var(--dx-g-global-header-padding-horizontal);
}

.header_l2_group {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.header_l2_group-title {
    flex-shrink: 0;
    padding: var(--dx-g-spacing-smd) 0 calc(var(--dx-g-spacing-smd) - 1px) 0;
}

.header_l2_group-title
    .header_version-selector[aria-expanded="true"]::part(icon) {
    transform: rotateX(180deg);
}

.header_l2_group-title .header_version-selector::part(container) {
    padding: 0 var(--dx-g-spacing-xs);
}

.header_l2_group-title .subtitle {
    margin-right: var(--dx-g-spacing-md);
}

.header_l2_group-title > dx-icon {
    margin-right: var(--dx-g-spacing-sm);
    color: var(--dx-g-brand-current-color-background);
    border-radius: var(--dx-g-spacing-xs);
}

.header_l2_group-nav {
    flex-grow: 1;
}

.header_l2_group-nav_overflow > dx-button {
    margin-left: auto;
}

.home-link {
    display: contents;
}

.home-link .subtitle:not(:first-child) {
    margin-left: var(--dx-g-spacing-sm);
}

.header-login-signup,
.header-tbid-login {
    display: flex;
    align-items: center;
}

.header-login-signup dx-button,
.header-tbid-login dw-tbid-login-menu {
    margin-left: var(--dx-g-spacing-smd);
}

@media (max-width: 768px) {
    .header_l2_group-nav {
        padding-left: calc(var(--dx-g-global-header-padding-horizontal) - 4px);
    }

    .header_l2_group-nav_overflow {
        overflow-x: auto;
        overflow-y: hidden;
    }
}