//== Variables
@hdeng-header-menu-breakpoint: @hdeng-breakpoint-container;

@hdeng-header-height: 90px;
@hdeng-header-height-small: 50px;

@hdeng-header-logo: url('img/hdeng-logo.svg');
@hdeng-header-logo-fallback: url('img/hdeng-logo.png');
@hdeng-header-logo-fallback-small: url('img/hdeng-logo-small.png');

@hdeng-header-logo-height: 29px;
@hdeng-header-logo-height-small: 21px;
@hdeng-header-logo-border: 10px;
@hdeng-header-logo-offset: 20px;
@hdeng-header-logo-offset-mobile: 5px;

@hdeng-header-top-bg-color: rgba(19, 21, 22, 0.7);
@hdeng-header-top-font-color: @hdeng-header-font-default-color;
@hdeng-header-top-height: (@hdeng-spacing * 2);

//== Elements
.hdeng-header-background() {
    background-color: @hdeng-header-bg-default-color;
}

.hdeng-header-border() {
    border-bottom: 1px solid @hdeng-header-bg-contrast-color;
}

.hdeng-header-shadow() {
    box-shadow: 0 4px 4px -2px rgba(21, 21, 21, 0.4);
}

//== Generates
.hdeng-header-critical-generate(@background: true; @border: true; @shadow: true) {
    .header {
        position: relative;
        width: 100%;
        color: @hdeng-header-top-bg-color;
    }

    .header__top {
        background: @hdeng-header-bg-contrast-color; // Fallback for default only
        background: @hdeng-header-top-bg-color;
    }

    .header__top {
        .header__container {
            height: @hdeng-header-top-height;
            display: table;
            width: 100%;
            margin: 0 auto;

            @media (max-width: @hdeng-header-menu-breakpoint) {
                display: none;
            }
        }
    }

    .header__top--bl {
        .header__container {
            @media (max-width: @hdeng-header-menu-breakpoint) {
                display: block;
                height: auto;
            }
        }

        .header__metamenu {
            position: absolute;
            top: 50%;
            right: @hdeng-content-padding;
            z-index: 999;

            margin-top: -(23px / 2);
            display: table-cell;
            vertical-align: middle;

            @media (max-width: @hdeng-header-menu-breakpoint) {
                top: (@hdeng-header-height-small / 2);
                right: (36px + (@hdeng-content-padding * 2)); // Leave place for the off-canvas navigation button
            }

            @media (max-width: @hdeng-breakpoint-mobile) {
                right: (36px + (@hdeng-content-padding + @hdeng-content-padding-mobile)); // Leave place for the off-canvas navigation button
            }

            @media (max-width: 700px) {
                span {
                    display: none;
                }
            }
        }
    }

    .header__main {
        .header__container {
            height: @hdeng-header-height;

            @media (max-width: @hdeng-header-menu-breakpoint) {
                height: @hdeng-header-height-small;
            }
        }
    }

    .header__container {
        .hdeng-container();
        .hdeng-content-padding();
    }

    .header__metamenu {
        color: @hdeng-header-top-font-color;
        font-size: @hdeng-base-font-size-small;
        text-align: right;
        display: table-cell;
        vertical-align: middle;
    }

    .header__metamenu--bl {
        padding-top: (@hdeng-header-top-height - 23px) / 2;
    }

    .header__logos {
        position: absolute;
        top: @hdeng-header-logo-offset;
        left: (@hdeng-content-padding - @hdeng-header-logo-border);
        z-index: 999;

        @media (max-width: @hdeng-header-menu-breakpoint) {
            top: @hdeng-header-logo-offset-mobile;
        }

        @media (max-width: @hdeng-breakpoint-mobile) {
            left: (@hdeng-content-padding-mobile - @hdeng-header-logo-border);
        }
    }

    .logos__logo {
        display: inline-block;
        height: (30px + (@hdeng-header-logo-border * 2));
        width: (160px + (@hdeng-header-logo-border * 2));

        text-indent: -20000em;

        background-repeat: no-repeat;
        background-size: 160px auto;
        background-position: center top;
        border: @hdeng-header-logo-border solid transparent;

        @media (max-width: @hdeng-header-menu-breakpoint) {
            height: (25px + (@hdeng-header-logo-border * 2));
            width: (120px + (@hdeng-header-logo-border * 2));

            background-size: 120px auto;
        }
        span {
            .hdeng-visuallyhidden();
        }
    }

    .logos__logo--he {
        background-image: @hdeng-header-logo;
    }

    .no-svg {
        .logos__logo--he {
            background-image: @hdeng-header-logo-fallback;

            @media (max-width: @hdeng-header-menu-breakpoint) {
                background-image: @hdeng-header-logo-fallback-small;
            }
        }
    }

    .logos--bl {
        @media (max-width: @hdeng-header-menu-breakpoint) {
            margin-top: -@hdeng-header-logo-offset-mobile;
        }

        .logos__logo {
            height: (60px + (@hdeng-header-logo-border * 2));
            width: (160px + (@hdeng-header-logo-border * 2));
            background-color: #25282D;
            border-radius: @hdeng-border-radius;
            box-shadow: 0 4px 4px -2px rgba(21, 21, 21, 0.4);

            @media (max-width: @hdeng-header-menu-breakpoint) {
                height: (30px + (@hdeng-header-logo-border * 2));
                width: (80px + (@hdeng-header-logo-border * 2));

                background-size: 80px auto;
                background-color: transparent;

                box-shadow: none;
            }
        }

        .logos__logo--he {
            background-image: url('img/hdeng-bl-logo.svg');

            .no-svg & {
                background-image: url('img/hdeng-bl-logo.png');

                @media (max-width: @hdeng-header-menu-breakpoint) {
                    background-image: url('img/hdeng-bl-logo-small.png');
                    background-size: 80px auto;
                }
            }
        }

        .logos__logo--academy {
            background-image: url('img/hdeng-academy-logo.svg');
        }

        .logos__logo--secondary {
            margin-left: floor(@hdeng-spacing / 4);

            // background-image url must to be set on frontend
            background-position: center;
            background-size: contain;

            @media (max-width: @hdeng-header-menu-breakpoint) {
                margin-left: -10px;
            }
        }
    }

    .header__menu {
        float: right;
        height: (@hdeng-spacing * 2);
        margin: ((@hdeng-header-height - (@hdeng-spacing * 2)) / 2) 0;

        color: @hdeng-header-font-default-color;
        font-size: @hdeng-base-font-size-medium;
        line-height: @hdeng-spacing;
        text-align: right;

        @media (max-width: @hdeng-header-menu-breakpoint) {
            display: none;
        }
    }

    .header__off-canvas-navigation {
        display: none;

        @media (max-width: @hdeng-header-menu-breakpoint) {
            display: block;
        }
    }
}

.hdeng-header-critical-generate(@background: true; @border: true; @shadow: true) when (@background) {
    .header {
        .hdeng-header-background();
    }
}

.hdeng-header-critical-generate(@background: true; @border: true; @shadow: true) when (@border) {
    .header {
        .hdeng-header-border();
    }
}

.hdeng-header-critical-generate(@background: true; @border: true; @shadow: true) when (@shadow) {
    .header {
        .hdeng-header-shadow();
    }
}

.hdeng-header-generate() {
    // Silence
}
