@import "/templates/definitions";

/* Topbar */
@mobileTopbarHeight: 42px;
@topbarHeight: 49px;
/* Achtung bei folgenden Breakpoints: In eingeloggtem Zustand hat es einen Menüpunkt zusätzlich! */
@topbar_showswitches: 27em; 	/* bis zu diesem Breakpoint werden Sprach- & Währungsschalter als Aufklapper angezeigt */
@topbar_showlabels: 43em; 		/* bis zu diesem Breakpoint werden nur Icons angezeigt. */

.header {
    background:#fff;
    padding-top:@mobileTopbarHeight;
    .responsive-lg({
        padding-top:@topbarHeight;
    });
    &__topbar {
        height:@mobileTopbarHeight;
        .responsive-lg({
            height:@topbarHeight;
        });
        background:@color-background-primary;
        position: fixed;
        z-index: 100;
        top: 0;
        left: 0;
        width: 100%;
        font-size:0.9rem;
        color:#000;
        .hamburger {
            float:right;
            padding: 9px 0 9px 15px;
            .responsive-lg({
                display:none;
            });
        }
        .hamburger-box {
            width:30px;
            vertical-align:middle;
        }
        .hamburger-inner,
        .hamburger-inner::before,
        .hamburger-inner::after {
            background:#000;
            height:2px;
            width:30px;
        }
        .hamburger-inner::before {
            top:-7px;
        }
        .hamburger-inner::after {
            bottom:-7px;
        }
        > .container {
            height:100%;
        }
    }
    &__topmenus {
        float:left;
        display:flex;
        height:100%;
        max-width: ~'calc(100% - 46px)'; // minus hamburger breite + 1px
        .responsive-lg({ float: right; });
    }
    &__topmenu {
        .resetList();
        float:left;
        display:flex;
        li {
            float:left;
        }
        a {
            color: @color-font;
            display:block;
            padding: 0.9em 1.6em;
            height:100%;
            &.active {
                font-weight: @font-weight-medium;
            }
            //@media (min-width: @topbar_showlabels) {
            //    padding:1em 1.6em;
            //}
            &.icon {
                font-size:0;
                line-height: 1.5rem;
				@media (min-width: @topbar_showlabels) {
                	padding-top: .5rem;
				}
				.responsive-lg({
					padding-top: .6rem;
				});				
                &:before {
                    content:' ';
                    width: 16px;
                    height:@mobileTopbarHeight;
                    display: inline-block;
                    background-repeat: no-repeat;
                    background-position: center;
                    background-size: contain;
                    vertical-align: baseline;
                    margin: 0 15px;
                    @media (min-width: @topbar_showlabels) {
                        margin:0;
                        height:1.3em;
                        margin-right:0.5em;
                        margin-bottom: -4px;
                    }
                }
                &--rememberlist:before {
                    background-image:url(/assets/icons/headericon_rememberlist.svg);
                }
                &--login:before {
                    background-image:url(/assets/icons/headericon_login.svg);
                }
                &--logout:before {
                    background-image:url(/assets/icons/headericon_logout.svg);
                }
                &--profile:before {
                    background-image:url(/assets/icons/headericon_profile.svg);
                }
                &--help:before {
                    background-image:url(/assets/icons/headericon_help.svg);
                }
                &--dropdown:before {
                    background-image:url(/assets/icons/headericon_dropdown.svg);
                    background-size:60%;
                }
                @media (min-width: @topbar_showlabels) {
                    font-size:0.9rem;
                }
            }
        }
        /* Fallback-Styles für die Selects, für den Zeitraum bis styledInput geladen und initialisiert ist */
        select {
            padding: 1.2em 3.5em 1.2em 1.3em;
            border: 0;
            height: 100%;
            background-image: url(/assets/icons/dropdown.svg);
            background-position: center right 1.6em;
            background-repeat: no-repeat;
            color: @color-font;
            font-size:0.9rem;
            margin-bottom:0;
        }
        a, .styledInput {
            .smooth();
            &:hover,
            &.active {
                background:lighten(@color-background-primary,3);
            }
        }
        &--pages {
            background:#fff;
            a {
                &:hover,
                &.active {
                    background: darken(@color-background-primary,3);
                }
            }
        }
        &--switches {
        }
        #header_openswitches {
            @media (min-width: @topbar_showswitches) {
                display:none;
            }
        }
        &_mobiledropdown {
            display:none;
            position: fixed;
            top: @mobileTopbarHeight;
            background: #fff;
            box-shadow:2px 2px 3px rgba(0,0,0,0.5);
            &.open {
                display:block;
            }
            @media (min-width: @topbar_showswitches) {
                display:flex;
                position:relative;
                top:auto;
                margin-left:0;
                background: transparent;
                box-shadow:none;
            }
            & .si-options > div > div > a {
                padding-left: 1.35rem !important;
            }
        }
    }
    .styledInput {
        display:block;
        float:left;
        > span {
            padding: .8em 1.5em !important;
            //.responsive-md({
            //    padding: .8em 1.5em !important;
            //});
            &:after {
                right:1.3rem !important;
            }
        }
    }
    &__content {
        position:relative;
        margin-top:@gutter;
        margin-bottom:@gutter;
        .responsive-lg({
            //margin-top:30px;
            margin-bottom:20px;
        });
    }

    /**************CUSTOM******/

    &__containerHeaderWrapper {
        &-Outer {
            //padding: 20px 0;
            background-color: white;
            //transition: all .3s ease;
            &--sticky {
                //padding: 10px 0;
                width: 100%;
                z-index: 99;
                position: fixed;
                top: 0;
                .header {
                    &__topbar {
                        position: relative;
                    }
                    &__content {
                        position: unset;
                    }
                    &__logobox {
                        &--desktop {
                            position: absolute;
                            top: 6px;
                            z-index: 110;
                        }
                    }
                    &__menucontainer {
                        margin-top: 4px;
                    }
                }
            }
        }
        &-Inner {
            margin: 0 auto !important;
        }
    }

    /**************END CUSTOM**/

    &__logobox {
        &--desktop{
            display:none;
            .responsive-lg({
                display:block;
            });
            img {
                height:100px;
            }
        }
        &--mobile{
            display: block;
            img {
                max-height:40px;
            }
            .responsive-sm({
                img {
                    max-height:60px;
                }
            });
            .responsive-lg({
                display:none;
            });
        }
    }
    &__desktopLogo--sticky {
        display: none;
        max-height: 40px;
    }
    &__searchbox {
        position:relative;
        margin-top:1rem;
        .responsive-md({
            margin-top:0;
        });
        form {
            position:relative;
            .responsive-lg({
                margin-right: @gutter;
            });
        }
        input[type="text"] {
            width:100%;
            text-overflow: ellipsis;
            padding: 0.5rem 4rem 0.5rem 0.9rem;
        }
        input[type="submit"] {
            position: absolute;
            right: 0;
            top: 0;
            background-color:transparent;
            background-image:url(/assets/icons/search.svg);
            background-position:center;
            background-repeat:no-repeat;
            background-size: 36%;
            width: 4rem;
            height: 100%;
            .smooth();
            &:hover {
                opacity:0.5;
            }
        }
        &.searchbar-hidden {
            display: none !important;
        }
    }
    &__actions {
        white-space:nowrap;
        text-align:right;
        .responsive-lg({
            margin-top:0;
            text-align:right;
        });
        .button {
            padding: .552rem .8rem;
        }
        .responsive-md({
            .button--md-big {
                padding: .552rem .8rem;
            }
        });
    }
    &__menucontainer {
        position: fixed !important;
        z-index:98;
        background: #fff;
        top: @mobileTopbarHeight - 1px;
        left: 0;
        width: 100%;
        font-family: @font-family-navigation;
        font-weight: @nav-weight;
        overflow:hidden;
        max-height:0;
        min-height: 0 !important;
        transition:max-height .2s ease;
        &.is-active {
            max-width: unset !important;
            max-height: 100vh;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
        }
        .responsive-lg({
            position:relative !important;
            max-height:none;
            box-shadow:none;
            top:auto;
            margin-top:25px;
            height:auto !important;
            &.col-md-8 {
                max-width: ~'calc(100% - 304px)'; // minus warenkorb breite
            }
        });
    }
    &__menuinner {
        padding:20px (@gutter/2);
        .responsive-lg({
            padding:0;
        });

        ul {
            .resetList();
            line-height:230%;
            li {
                display:block;
                padding: @gutter 0;
                border-bottom: 1px solid @color-background-primary;
                &:first-child {
                    padding-top: 0;
                }
                .responsive-lg({
                    border: none;
                    padding: 0;
                    display:inline-block;
                });
            }
        }
    }
    &__menu {
        .responsive-lg({
            display: flex;
            flex-direction: row;
            gap: 0 2.8rem;
            flex-wrap: wrap;
            transition: all .2s ease-in-out;
            > li {
                flex-shrink: 0;
            }

            .header__containerHeaderWrapper-Outer--sticky & {
                gap: 0 2.4rem;
            }
        });
        &--right {
            justify-content: flex-end;
        }
        &--center {
            justify-content: center;
        }
        a {
            //font-size:1.5rem;
            font-size:@font-size-nav-mobile;
            color: @color-font;
            .responsive-lg({
                //font-size:1.3rem;
                font-size:@font-size-nav;
            });
            &:hover {
                color:@color-secondary;
            }
            &.active {
                font-weight: @font-weight-bold;
                color:@color-secondary;
                + ul {
                    max-height:2000px;
                    transition:max-height .5s ease;
                }
            }
        }
        ul {
            max-height:0;
            overflow:hidden;
            padding-left:1rem;
            li {
                border: none;
                padding: @gutter/4 0;
                &:first-child {
                    padding-top: @gutter/4;
                }
            }
            a {
                font-size:1.2em;
                .responsive-lg({
                    font-size:1rem;
                });
            }
            .responsive-lg({
                display:none;
            });
        }
        /*.responsive-lg({
            > li {
                > a {
                    margin-right:2.8em;
                }
                &:last-child {
                    > a {
                        margin-right:0;
                    }
                }
            }
        });*/
    }
}