/*-------------------------------------------*\
    2.5. Headers
\*-------------------------------------------*/

/*------------------------------------
  Header Default
------------------------------------*/

.u-header {
    position: relative;
    right: 0;
    left: 0;
    width: 100%;
    z-index: $header-z-index;

    &__section {
        position: relative;
        z-index: 1;
        background-color: $header-bg;
        box-shadow: $header-box-shadow;

        &-divider {
            border-bottom: 1px solid rgba($white, .2);
        }
    }

    &__shadow-on-show-hide {
        box-shadow: none;

        .js-header-fix-moment & {
            box-shadow: $header-box-shadow;
        }
    }

    &__login-form {

        .form-control {
            font-size: $header-login-form-input-font-size;
            height: 3.125rem;
            color: $gray-1;

            &::placeholder {
                color: $gray-1;
            }
        }

        .input-group-text {
            color: $gray-11;

            > span {
                line-height: 1;
            }
        }

        .card-header {
            padding: $header-login-form-card-header-padding;
            border-bottom-color: $gray-8;
        }

        .card-body,
        .card-footer__top {
            padding-left: $header-login-form-card-body-paddingX;
            padding-right: $header-login-form-card-body-paddingX;
        }

        .card-footer {
            border-top-color: $gray-8;
        }

        .custom-control-label {
            color: $gray-1;

            &:before {
                border-width: 2px;
                border-color: $gray-8;
            }
        }
    }

    &__topbar {
        [class*="u-header__topbar-nav-divider"] {
            .list-inline-item {
                + .list-inline-item {
                    position: relative;

                    .u-header__navbar-link:before {
                        content: '';
                        background-color: $header-topbar-nav-link-divider-color;
                        position: absolute;
                        width: 1px;
                        height: 30px;
                        left: -1px;
                        display: block;
                        top: 50%;
                        transform: translateY(-50%);

                        @at-root {
                            [class*="u-header--bg-transparent"] #{&} {
                                opacity: 0.149;
                            }
                        }
                    }
                }
            }
        }

        [class*="u-header__topbar-divider"]:not( .list-inline ) {
            position: relative;

            &:before {
                content: '';
                background-color: $header-topbar-nav-link-divider-color;
                position: absolute;
                width: 1px;
                height: 30px;
                left: 0;
                display: block;
                top: 50%;
                transform: translateY(-50%);

                @at-root {
                    [class*="u-header--bg-transparent"] #{&} {
                        opacity: 0.149;
                    }
                }
            }
        }

        .u-header__topbar-divider--dark:not( .list-inline ):before,
        .u-header__topbar-nav-divider--dark .list-inline-item + .list-inline-item .u-header__navbar-link:before {
            background-color: $header-topbar-nav-link-divider-dark-color;
        }

        .list-inline-item:first-child {
            .u-header__navbar-link {
                padding-left: 0;
            }
        }

        .dropdown-menu {
            min-width: 4.375rem;
            padding: $header-topbar-dropdown-padding 0;
        }

        .dropdown-item {
            padding: $header-topbar-dropdown-item-paddingY $header-topbar-dropdown-item-paddingX;
            text-align: center;
        }

        &[class*="bg-"] {
            .u-header__navbar-link {
                padding-top: $header-topbar-nav-link-md-paddingY;
                padding-bottom: $header-topbar-nav-link-md-paddingY;
            }
        }

        &:not( [class*="bg-"] ) {
            @at-root .u-header:not( [class*="u-header--bg-transparent"] ) {
                [class*="u-header__topbar-divider"]:before,
                [class*="u-header__topbar-nav-divider"] .list-inline-item + .list-inline-item .u-header__navbar-link:before {
                    height: 20px;
                }
            }
        }
    }

    [class*="u-header__search"] .form-control  {
        &:focus {
            padding-right: 0.5rem !important;
        }
    }

    &__divider {
        @each $breakpoint in map-keys($grid-breakpoints) {
            $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

            &#{$infix} {
                @include media-breakpoint-up($breakpoint) {
                    position: relative;

                    &:before {
                        content: '';
                        background-color: $header-divider-color;
                        position: absolute;
                        width: 1px;
                        height: 50px;
                        top: 50%;
                        left: 0;
                        display: block;
                        transform: translateY(-50%);
                    }

                    &.u-header__divider-right:before {
                        left: unset;
                        right: 0;
                    }
                }
            }
        }
    }

    &__search,
    &__topbar,
    &__last-item-btn {
        @each $breakpoint in map-keys($grid-breakpoints) {
        $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

            &#{$infix} {
                @include media-breakpoint-down($breakpoint) {
                    display: none;
                }
            }
        }
    }

    &.js-header-fix-moment .u-header__last-item-btn {
        .btn {
            &[class*="-white"] {
                @extend .btn-primary;
            }
        }
    }

    .hs-sub-menu-right {
        right: 0;
        left: unset;
    }
}

/* Navbar */
.u-header__navbar {
    padding-top: $header-navbar-paddingY;
    padding-bottom: $header-navbar-paddingY;
    padding-left: 0;
    padding-right: 0;
}

/* Navbar Space */
@include media-breakpoint-down(md) {
    .u-header {
        .u-header__navbar {
            &.u-header__navbar--top-space {
                padding-top: $header-navbar-paddingY;
            }
        }
    }
}

/* Navbar Brand */
.u-header__navbar-brand {
    @include media-breakpoint-down(sm) {
        margin-right: 0.625rem;
    }

    &,
    & > img {
        padding-top: 0;
        padding-bottom: 0;
        width: $header-navbar-brand-width;
    }

    &-center {
        display: flex;
        align-items: center;
    }

    &-vertical {
        display: block;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 2.5rem;

        .u-header__navbar-brand-text {
            display: block;
            margin-left: 0;
        }
    }

    &-text {
        font-size: 1.75rem;
        margin-left: 0.875rem;

        @include media-breakpoint-down(sm) {
            font-size: 1.438rem !important;
        }

        &,
        &:focus,
        &:hover {
            color: $primary;
        }

        @at-root {
            .u-header__navbar-brand-text-md #{&} {
                font-size: 1.5rem;
                margin-left: 0.75rem;
            }
        }
    }

    &-text {
        font-weight: $font-weight-bold;

        &-white {
            .u-header__navbar-brand-text {
                &,
                &:focus,
                &:hover {
                    color: $white;
                }
            }
        }

        &-dark {
            @each $breakpoint in map-keys($grid-breakpoints) {
            $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

                &#{$infix} {
                    @include media-breakpoint-up($breakpoint) {
                        [class*="u-header__navbar-brand-text"] {
                            @at-root .u-header:not( .js-header-fix-moment ) #{&} {
                                &,
                                &:focus,
                                &:hover {
                                    color: $dark;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

/* Navbar Collapse */
.u-header__navbar-collapse {
    padding-top: 0;
    padding-bottom: 0;
}

/* Navbar Link */
.u-header__navbar-link {
    color: $gray-700;
    font-size: $header-navbar-link-font-size;
    font-weight: $font-weight-light;
    padding-left: $header-topbar-nav-link-paddingX;
    padding-right: $header-topbar-nav-link-paddingX;
    display: inline-block;
    padding-top: $header-topbar-nav-link-paddingY;
    padding-bottom: $header-topbar-nav-link-paddingY;

    @at-root .list-inline-dark #{&} {
        color: $dark;
    }
}

/* Nav Item */
.u-header {
    .u-header__nav-item {
        &:first-child {
            .u-header__nav-link {
                padding-left: 0;
            }
        }
    }
}

.u-header__nav-item {
    &:hover,
    &:focus {
        .u-header__nav-link {
            color: $header-nav-link-hover-color;
        }
    }
}

/* Nav Link */
.u-header {
    .active > {
        .u-header__nav-link {
            color: $header-nav-link-active-color;
        }
    }
}

.u-header__nav-link {
    color: $header-nav-link-color;
    font-weight: $header-nav-link-font-weight;

    @at-root {
        .u-header--nav-links-normal #{&} {
            font-weight: $header-nav-link-normal-font-weight;
        }
    }

    &-toggle {
        position: relative;

        &::after {
            display: inline-block;
            font-family: $font-family-font-awesome-icon;
            font-size: 14px;
            font-weight: 900;
            content: "\f107";
            margin-left: 0.75rem;
            transition: $header-nav-link-icon-transition;
        }
    }

    @at-root {
        [class*="u-header--bg-transparent"]:not(.js-header-fix-moment) .hs-sub-menu-opened #{&}:before,
        [class*="u-header--bg-transparent"]:not(.js-header-fix-moment) .hs-mega-menu-opened #{&}:before {
            position: absolute;
            display: block;
            pointer-events: none;
            border: 10px solid transparent;
            border-bottom-color: $white;
            content: '';
            height: 0;
            width: 0;
            left: 50%;
            top: 100%;
            transform: translateY(-100%);
            animation-name: slideInUp;
            animation-duration: 210ms;
        }
    }
}

/* Sub Menu */
.u-header__sub-menu {
    width: 100%;
    padding-left: 0;
    list-style: none;

    &-nav-group {
        padding-left: 0;
        list-style: none;
    }

    &-nav-link {
        display: flex;
        align-items: center;
        font-size: $header-sub-menu-nav-link-font-size;
        color: $header-nav-link-color;

        &-toggle {
            position: relative;

            &::after {
                display: inline-block;
                font-family: $font-family-font-awesome-icon;
                font-size: 80%;
                font-weight: 900;
                content: "\f105";
                margin-left: auto;
                margin-right: .04rem;
                transition: $header-nav-link-icon-transition;
            }
        }
    }

    .active > {
        .u-header__sub-menu-nav-link {
            color: $header-nav-link-active-color;
        }
    }

    &-title {
        display: block;
        color: $header-sub-menu-title;
        font-size: $header-sub-menu-title-font-size;
        font-weight: $header-sub-menu-title-font-weight;
        margin-bottom: $header-sub-menu-margin-bottom;
    }
}

/* Promo */
.u-header__promo {
    background-color: $header-secondary-banner-bg;

    &-inner {
        padding: 2rem;
    }

    &-item {
        margin-left: $header-promo-margin-x;
        margin-right: $header-promo-margin-x;

        & ~ & {
            border-top: 1px solid $gray-300;
        }
    }

    &-link {
        display: block;
        padding-top: $header-promo-padding;
        padding-bottom: $header-promo-padding;
        margin-top: $header-promo-margin-y;
        margin-bottom: $header-promo-margin-y;

        &:hover {
            .u-header__promo-title {
                color: $primary;
            }
        }
    }

    &-card {
        display: flex;
        flex-direction: column;
        min-width: 0;
        word-wrap: break-word;
        background-clip: border-box;

        &-deck {
            display: block;

            &:not(:last-child) {
                .u-header__promo-item {
                    border-bottom: 1px solid $gray-300;
                }
            }

            .u-header__promo-item {
                border-top: none;
            }
        }

        &-body {
            flex: 1 1 auto;
        }
    }

    &-icon {
        width: 100%;
        max-width: 2.75rem;
        margin-right: 1rem;

        &--sm {
            max-width: 1.75rem;
        }
    }

    &-title {
        display: block;
        color: $header-sub-menu-title;
        font-size: $header-sub-menu-title-font-size;
        font-weight: $header-banner-title-font-weights;
    }

    &-text {
        display: block;
        color: $secondary;
    }

    &-footer {
        background-color: $header-secondary-banner-bg;
        @include border-bottom-radius($header-border-radius);
        padding-top: $header-nav-groups-padding;
        padding-bottom: $header-nav-groups-padding;

        &-item {
            padding-left: $header-nav-groups-padding;
            padding-right: $header-nav-groups-padding;
        }

        &-ver-divider {
            position: relative;

            &::before {
                position: absolute;
                top: 0;
                left: 0;
                height: 100%;
                border-right: 1px solid $gray-400;
                content: "";
            }
        }
    }
}

/* Banner */
.u-header__banner {
    position: relative;
    height: 100%;
    overflow: hidden;
    @include background-cover(cover, no-repeat, top, center);
    @include border-bottom-left-radius($header-banner-border-radius);

    &:not( .u-header__banner-no-overlay )::after {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-color: rgba($dark, .5);
        @include border-bottom-left-radius($header-banner-border-radius);
        content: "";
    }

    &-content {
        z-index: 1;
        width: 100%;
        padding: 1.438rem 1.25rem;

        &:not( .u-header__banner-content-not-centered ) {
            @include content-centered(false, true);
        }

        &-not-centered .u-header__banner-text {
            padding-right: 3.313rem;
        }

        .btn-sm {
            padding: 0.532rem 1.456rem;
        }
    }

    &-title {
        display: block;
        color: $white;
        font-size: $header-banner-title-font-sizes;
        font-weight: $header-banner-title-font-weights;
        margin-bottom: 0.875rem;
    }

    &-text {
        display: block;
        font-size: $header-banner-text-font-sizes;
        color: $white;
        margin-bottom: 1.375rem;
    }

    &-caption {
        display: block;
        color: $white;
        font-size: $header-banner-title-font-sizes;
        font-weight: $header-banner-title-font-weights;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate( -50%, -50% );
        width: 100%;
        text-align: center;
    }
}

/* Product Banner */
.u-header__product-banner {
    background-color: $header-secondary-banner-bg;
    @include border-bottom-radius($header-product-banner-border-radius);
    padding-right: $header-nav-groups-padding;

    &-content {
        padding-top: $header-nav-groups-padding;
        padding-bottom: $header-nav-groups-padding;
    }

    &-title {
        display: block;
        color: $primary;
        font-size: $header-banner-title-font-sizes;
        font-weight: $header-banner-title-font-weights;
        margin-bottom: .5rem;
    }

    &-text {
        color: $dark;
        margin-bottom: 0;
    }
}

/* Hide Content */
.u-header {
    &.js-header-fix-moment {
        .u-header__hide-content {
            display: none;
        }
    }
}

.u-header {
    &.u-header--moved-up {
        &.u-header--hide-topbar {
          transform: translate3d(0, -33px, 0);
        }
    }
}

.hs-position-right.u-header__mega-menu-position-right-fix {
    @each $breakpoint in map-keys($grid-breakpoints) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

        &#{$infix} {
            @each $dropdown-position in $dropdown-positions {
                &-#{$dropdown-position} {
                    @include media-breakpoint-up($breakpoint) {
                        right: $dropdown-position * 1% !important;
                    }
                }
            }
        }
    }
}

.hs-position-left.u-header__mega-menu-position-left-fix {
    @each $breakpoint in map-keys($grid-breakpoints) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

        &#{$infix} {
            @each $dropdown-position in $dropdown-positions {
                &-#{$dropdown-position} {
                    @include media-breakpoint-up($breakpoint) {
                        left: $dropdown-position * 1% !important;
                    }
                }
            }
        }
    }
}