/*
Header
==========================================
Defines the styles of the Shopware storeview header and its components.

It contains the viewport specific styles inside media queries.

The header sizes are defined by the unitize mixin.

More precise designations are commented inside the document.
*/

    // Basic header
.header-main {
    .unitize(padding-bottom, 10);
    background: #fff;
    border-bottom: 1px solid @brand-primary;

    // Hide the currency and language switcher
    .top-bar { display: none }

    // Logo
    .logo-main {
        .unitize-padding(10, 10);

        .logo--link {
            .unitize-height(35, 16);
            display: inline-block;
            max-width: 100%;
        }

        // Smaller logo for mobile viewports
        .logo--shop {
            .unitize-height(35, 16);
            width: 50%;
        }

        .logo--supportinfo {
            display: none;
        }
    }

    .header--navigation {
        position: relative;
    }
}

    // Small Checkout & Registration Header
.is--ctl-checkout.is--minimal-header,
.is--ctl-register.is--minimal-header,
.is--ctl-register.is--minimal-header.is--target-checkout {

    // Header Support Info
    .header-main {
        .logo-main { width: 100%; }
        .logo--shop { width: 50% }
        .logo--link { .unitize(margin-top, 10); }

        .logo--supportinfo { display: none; }
        border-bottom: 1px solid @brand-primary;

        .btn--back-top-shop {
            .unitize(margin-top, 10);
            width: 40%;
            float: right;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    }
}

    // Shop navigation
.shop--navigation {
    position: relative;

    .navigation--list {
        width: 100%;
        text-align: right;
    }

    .navigation--entry {
        .unitize(margin-right, 5);
        display: inline-block;

        // General button styling in shop navigation
        .btn {
            .unitize-height(40, 16);
            .unitize-width(40, 16);
            vertical-align: middle;
        }

        .cart--link { .unitize-padding(2, 10, 2, 6); }
        .account--link {
            .unitize-padding(2, 10, 2, 8);

            &.account--user-loggedin:after {
                .unitize-width(16);
                .unitize-height(16);
                .unitize(top, -5);
                .unitize(right, -5);
                .unitize(line-height, 18);
                .unitize(font-size, 8);
                .border-radius(50%);
                content: @sw-icon-check;
                display: inline-block;
                position: absolute;
                background: @highlight-success;
                font-family: @sw-icon-fontname;
                color: #fff;
            }
        }

        .icon--basket,
        .icon--account {
            .unitize(font-size, 21);
            display: inline;
            position: relative;
            vertical-align: middle;
            top: 0;
            left: 0;
        }

        .icon--heart {
            .unitize(font-size, 18);
            vertical-align: middle;
        }

        .icon--search {
            .unitize(font-size, 22);
            vertical-align: middle;
        }
    }

    // Shop navigation quantity badges
    .cart--quantity,
    .notes--quantity {
        .unitize(-4, 16, top);
        .unitize(left, 23);
        position: absolute;
        margin: 0;
    }

    .entry--link {
        text-align: center;
        text-decoration: none;
    }

    .main-search--form,
    .account--display,
    .cart--display,
    .cart--amount,
    .search--display {
        display: none;
    }

    .entry--search {
        .is--active.btn {
            background: @btn-default-hover-bg;
            color: @btn-default-hover-text-color;
            border-color: @btn-default-hover-border-color;
        }
    }

    .entry--account {
        position: relative;
    }

    .entry--cart {
        .unitize(margin-right, 12);
        position: relative;
    }

    // Menu Button toggle OffCanvas
    .entry--menu-left {
        .tap-highlight-color();
        top: 0;
        left: 0;
        position: absolute;
        display: block;
        font-weight: @font-bold-weight;
        text-align: left;

        .btn {
            .unitize(padding-left, 48);
            .unitize(line-height, 35);
            .unitize(font-size, 17);
            .unitize-height(40, 16);
            color: @brand-secondary;
            width: auto;
            background: 0 none;
            border: 0 none;
        }

        .icon--menu { .unitize(font-size, 20); }
    }
}

    // Default ajax search form
.main-search--form {
    .unitize-padding(10, 10);
    width: 100%;
    left: 0;
    top: 0;
    position: absolute;
    z-index: @zindex-header-search-form;

    .main-search--field {
        .unitize-padding(9, 38, 9, 9);
        .unitize-height(40, 16);
        background: #fff;
        vertical-align: middle;
        width: 100%;
        position: relative;
    }

    .main-search--button {
        .appearance(none);
        .unitize(top, 10);
        .unitize(bottom, 10);
        .unitize(right, 10);
        .unitize(font-size, 20);
        .unitize-padding(0, 10);
        line-height: 1;
        position: absolute;
        z-index: @zindex-header-search-button;
        border: 0 none;
        background: transparent;
        color: @text-color;
        outline: none;
    }

    .main-search--text {
        display: none
    }
}

.account--menu.is--personalized {
    .navigation--logout-personalized {
        display: inline-block;
    }

    .navigation--logout {
        display: block;
    }

    .navigation--link.navigation--personalized  {
        .unitize(padding-top, 9);
        .unitize(padding-left, 23);
        .unitize(padding-bottom, 9);
        .unitize(line-height, 20);
        position: relative;
        color: @text-color;
        font-weight: @font-base-weight;

        &:before,
        &::before {
            .unitize(width, 16);
            .unitize(height, 16);
            .unitize(left, 2);
            content: @sw-icon-logout;
            font-family: @sw-icon-fontname;
            position: absolute;
        }

        [class^="icon--"] {
            .unitize-margin(0, 5, 0, 0);
            display: inline-block;
        }

        .icon--logout {
            position: relative;
            .unitize(top, 10);
        }

        &:hover {
            color: @brand-primary;
        }
    }
}

.off-canvas {
    .account--menu.is--personalized {
        .navigation--signin {
            border-bottom: none;
        }
    }
}


// Drowdown menu for account navigation
.account--dropdown-navigation {
    display: none;
    text-align: left;

    .navigation--logout-personalized {
        display: inline-block;
    }

    .navigation--logout {
        display: block;
    }

    .navigation--signin {
        .unitize(padding-top, 15);
        .unitize(padding-bottom, 15);
        .unitize(margin-top, 7);
        border-bottom: 1px solid @border-color;
        display: block;
        text-align: center;

        .navigation--signin-btn.btn {
            .unitize(margin-bottom, 5);
            width: 95%;
            text-align: center;
        }
    }

    .navigation--register {
        .unitize(font-size, 13)
    }

    .navigation--link.link--logout.navigation--personalized {
        .unitize(line-height, 20);
        .unitize(padding-left, 33);
        color: @text-color;
        font-weight: @font-base-weight;

        &:before,
        &::before {
            .unitize(left, 10);
        }

        &:hover {
            color: @brand-primary;
        }
    }

    &.off-canvas {
        background: @gray;

        .account--menu,
        .sidebar--navigation {
            text-align: left;

            .navigation--entry {
                display: block;
                margin: 0;

                .navigation--link.link--logout.navigation--personalized  {
                    .unitize(padding-top, 9);
                    .unitize(padding-bottom, 9);

                     [class^="icon--"] {
                        .unitize-margin(0, 5, 0, 0);
                        display: inline-block;
                    }
                }
            }
        }

        .account--close-off-canvas {
            color: #fff;
            font-weight: @font-bold-weight;
        }
    }
}

    // Creating the arrow on active search field
.has--csstransforms .entry--search .entry--trigger {
    &.is--active::after {
        .rotate(-45deg);
        .unitize-width(15, 16);
        .unitize-height(15, 16);
        .unitize(margin-top, 8);
        .unitize(margin-left, 1);
        background: darken(@gray, 2%);
        content: '';
        display: block;
    }
}

.entry--search {
    &.is--active {
        .main-search--form {
            .unitize(top, 50);
            background: darken(@gray, 2%);
            left: 0;
            display: block;
            position: absolute;
        }
    }
}

.header-main.is--active-searchfield {
    .unitize(padding-bottom, 70);
}

    // Loading indicator for css animations supported browsers
.has--cssanimations {
    .form--ajax-loader {
        .unitize(top, 20);
        .unitize(right, 55);
        position: absolute;
        display: none;

        &::before {
            .unitize-width(16);
            .unitize-height(16);
            .border-radius(100%);
            .animation(keyframe--spin 1s linear infinite);
            border: 2px solid @border-color;
            border-top: 2px solid darken(@border-color, 50%);
            display: block;
            content: "";
        }
    }
}

    // Loading indicator for non css animations supported browsers
.has--no-cssanimations .form--ajax-loader {
    @hash-loading-indicator: swhash('../../img/icons/loading-indicator.gif');
    .unitize(top, 24);
    .unitize(right, 55);
    .unitize-width(16);
    .unitize-height(16);
    position: absolute;
    display: none;
    background-image: url('../../img/icons/loading-indicator.gif?@{hash-loading-indicator}');
}

    // Search results modal
.main-search--results {
    .clearfix();
    .unitize(top, 110);
    position: absolute;
    width: 100%;
    left: 0;
    text-align: left;
    z-index: @zindex-header-search-results;
    display: none;
}

.results--list {
    .unitize-padding(10, 10);
    .box-shadow(0 10px 25px -15px #000);
    border-top: 1px solid @border-color;
    border-bottom: 1px solid @border-color;
    background: #fff;
    -ms-touch-action: manipulation;

    &::after {
        .rotate(135deg);
        .unitize-width(12);
        .unitize-height(12);
        .unitize(-6, 16, top);
        content: '';
        display: block;
        position: absolute;
        background: #fff;
        left: 48%;
        border: 1px solid @border-color;
        border-top: 0 none;
        border-right: 0 none;
    }

    .list--entry,
    .entry--all-results {
        display: block;
    }

    .entry--all-results.is--active {
        font-weight: @font-bold-weight;

        .entry--all-results-number {
            font-weight: @font-bold-weight;
        }
    }

    .list--entry {
        .unitize(line-height, 30);
        border-bottom: 1px solid @border-color;

        &:last-child { border: 0 none; }
    }

    .entry--no-results {
        width: 100%;
        text-align: center;
        list-style: none;
        font-weight: @font-base-weight;
    }

    .is--active,
    .list--entry:hover {
        color: @link-color;

        .entry--name,
        .entry--price {
            color: @link-color;
        }
    }

    .search-result--link {
        .unitize-padding(6, 0);
        .clearfix();
        display: block;
    }

    .entry--name,
    .entry--all-results-link,
    .entry--all-results-number {
        .unitize-height(30, 16);
        .unitize(line-height, 30);
        display: block;
    }

    .price--unit {
        .unitize(font-size, 11);
        .unitize(line-height, 18);
        float: right;
    }

    .entry--media {
        .unitize-height(30, 16);
        width: 10%;
        min-width: 10%;
        position: relative;
        text-align: center;

        .media--image {
            display: inline-block;
            position: absolute;
            margin: auto;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
        }
    }

    .entry--name {
        .unitize(padding-left, 10);
        width: 60%;
        color: @text-color;
        font-weight: 700;

        // CSS truncating
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .entry--price,
    .entry--all-results-number {
        width: 30%;
        text-align: right;
        color: @text-color;
        white-space: nowrap;
    }

    .entry--all-results {
        .unitize-padding(6, 5);
        font-weight: @font-base-weight;
    }

    .entry--all-results-link {
        width: 70%;
        padding: 0;

        .icon--arrow-right {
            .unitize(-1, 16, top);
            .unitize-margin(0, 8, 0, 0);
            position: relative;
        }
    }

    .entry--all-results-number {
        font-weight: @font-base-weight;
        color: @link-color
    }
}

.off-canvas .mobile--switches {
    .navigation--entry {
        padding: 0;
        border: none;
        background: none;
    }
}

    // Phone Landscape styling for the global shop header
@media screen and (min-width: @phoneLandscapeViewportWidth) {

    .is--ctl-checkout.is--minimal-header,
    .is--ctl-register.is--minimal-header,
    .is--ctl-register.is--minimal-header.is--target-checkout {
        .header-main .btn--back-top-shop {
            width: auto;
        }
    }

    .entry--search {
        display: inline-block;
        position: absolute;
        left: 26%;
        width: 40%;

        // Remove the mobile search position in all other viewports
        &.is--active {
            .main-search--form {
                top: 0;
                display: inline-block;
            }
        }

        // Don't display toggle search bar icon
        .entry--trigger { display: none; }

        .main-search--form {
            .box-shadow(0 0 0 transparent);
            border-bottom: 0 none;
            padding: 0;
            display: inline-block;
            position: relative;

            // Reset the searchfield background
            .main-search--field {
                background: @input-bg;

                &:focus { background: #fff; }
            }

            // Icon position from here to @desktopViewportWidth
            .main-search--button {
                .unitize(top, 0);
                .unitize(bottom, 0);
                .unitize(right, 0);
                .unitize-padding(0, 10);
                .unitize(height, 40);
            }
        }
    }

    // Search results modal
    .main-search--results {
        .clearfix();
        .unitize(top, 50);
        .unitize-width(450);
        .unitize(-110, 16, margin-left);
    }

    .results--list {
        .border-radius();
        border: 1px solid @border-color;
        background: #fff;
    }

    // Remove the active searchfield padding
    .header-main {
        &.is--active-searchfield {
            .unitize(padding-bottom, 10);
        }
    }

    .has--cssanimations .form--ajax-loader {
        .unitize(top, 10);
        .unitize(right, 45);
        position: absolute;
    }

    .has--no-cssanimations .form--ajax-loader {
        .unitize(top, 14);
        .unitize(right, 45);
        position: absolute;
    }
}

    // Tablet styling for the global shop header
@media screen and (min-width: @tabletViewportWidth) {

    .header-main.is--active-searchfield  {
        padding-bottom: 0;
    }

    .header-main {
        padding-bottom: 0;
        border-bottom: 0 none;

        .container { .clearfix() }

        .top-bar {
            .unitize-padding(4, 0, 4, 0, 16);
            display: block;
        }

        .top-bar--navigation {
            width: auto;
            float: right;

            .navigation--entry {
                .unitize-padding(0, 15);
                .unitize(line-height, 25);
                float: left;
                display: block;

                li {
                    line-height: normal;
                }
            }

            .navigation--entry,
            .navigation--link {
                color: @text-color;
                cursor: pointer;

                &:hover {
                    color: @brand-primary;
                }
            }

            .field--select,
            .navigation--entry {
                .unitize-height(25, 16);
            }

            .field--select {
                position: relative;
            }

            .select-field {
                .unitize-height(25);

                select {
                    .reset-border-radius();
                    .unitize-padding(0, 18, 0, 0);
                    .unitize(line-height, 25);
                    background: none;
                    border: 0 none;
                }

                &:after {
                    .unitize-height(25);
                    .unitize(line-height, 24);
                    width: auto;
                    border: 0 none;
                }
            }

            // Language switcher
            .top-bar--language {
                .select-field {
                    .unitize-width(32);

                    select {
                        text-indent: -9999px;
                    }
                }

                .language--flag {
                    .unitize(-6, 16, margin-top);
                    position: absolute;
                    z-index: @zindex-header-language-flag;
                    top: 50%; left: 0;
                    pointer-events: none;
                }
            }

            // Service list
            .entry--service {
                position: relative;

                &:after,
                &::after {
                    .unitize(-3, 16, top);
                    .unitize(margin-left, 5);
                    content: @sw-icon-arrow-down;
                    font-family: @sw-icon-fontname;
                    position: relative;
                }

                &.js--is--dropdown-active {
                    color: @brand-primary;
                }
            }

            .service--list {
                .unitize-min-width(150);
                .unitize-padding(5, 0);
                .unitize(top, 32);
                .unitize(right, 12);
                text-align: left;
                position: absolute;
                display: none;
                list-style: none;
                background: #fff;
                z-index: @zindex-header-service-list;
                border: 1px solid @border-color;

                &::after {
                    .rotate(135deg);
                    .unitize-width(8);
                    .unitize-height(8);
                    .unitize(-5, 16, top);
                    .unitize(right, 18);
                    content: '';
                    display: block;
                    position: absolute;
                    background: #fff;
                    border-color: @border-color;
                    border-width: 0 0 1px 1px;
                    border-style: solid;
                }

                .service--link {
                    .unitize-padding(5, 10);
                    display: block;
                    color: @text-color;
                }

                .service--link:hover {
                    color: @brand-primary;
                }
            }

            .js--is--dropdown-active .service--list {
                display: block;
            }
        }

        .header--navigation {
            .unitize-padding(10, 0);
        }

        .logo-main {
            .unitize-padding(0, 0, 0, 10);
            width: 35%;

            .logo--link { .unitize-height(50, 16); }

            // Larger logo for tablet & desktop viewports
            .logo--shop {
                .unitize-height(50, 16);
                width: 82%
            }
        }
    }

    // Header Support Info
    .is--ctl-checkout.is--minimal-header,
    .is--ctl-register.is--minimal-header,
    .is--ctl-register.is--minimal-header.is--target-checkout {
        .header-main {
            .box-shadow(0 1px 2px 0 @border-color);

            .logo-main {
                .unitize(padding-right, 10);
                width: 100%;
            }

            .logo--shop { width: 35% }

            .logo--link {
                margin-top: 0;
                width: 80%;
            }

            .logo--supportinfo {
                .unitize-padding(5, 0);
                display: block;
                width: 35%;
            }
        }
    }

    .logo-main,
    .shop--navigation {
        float: left;
    }

    .shop--navigation {
        width: 65%;

        .navigation--list {
            background-image: none;
            text-align: right;
        }

        .navigation--entry {
            .border-radius();
            border: 0 none;
            width: auto;
            float: none;
            display: inline-block;
        }

        .entry--cart {
            .entry--link {
                padding: 0;
                display: inline-block;
            }
        }

        .entry--link { font-weight: @font-base-weight; }
        .entry--menu-left { display: none; }

        .cart--quantity,
        .search--display,
        .entry--account { display: inline-block; }

        // Search entry
        .entry--search {
            .unitize(font-size, 14);
            position: absolute;
            left: 3%;
            margin-right: 10%;
            background: #fff;
            padding: 0;
            border: 0 none;
            width: 50%;

            .entry--trigger { display: none }
        }

        // Search form
        .main-search--form {
            .box-shadow(0 0 0 transparent);
            display: block;
            padding: 0;
            border: 0 none;
        }
    }

    .main-search--form { left: auto; }

    // Drowdown menu for account navigation
    .account--dropdown-navigation {
        .unitize-min-width(200);
        .unitize-max-width(250);
        .unitize-padding(5, 0);
        .unitize(top, 45);
        display: none;
        position: absolute;
        right: 0;
        z-index: @zindex-header-navigation-dropdown;
        text-align: left;

        .js--is--dropdown-active & {
            display: block;
        }

        .navigation--signin {
            .unitize(padding-bottom, 6);
            .unitize(margin-bottom, 6);
            .unitize(margin-top, 5);
            padding-top: 0;

            .navigation--signin-btn.btn {
                width: 100%;
                margin-bottom: 0;
            }
        }

        .navigation--smartphone {
            display: none;
        }

        .account--menu {
            text-align: left;
            background: #fff;

            &::after {
                .rotate(135deg);
                .unitize-width(8);
                .unitize-height(8);
                .unitize(right, 18);
                content: '';
                display: block;
                position: absolute;
                background: #fff;
                border-color: @border-color;
                border-width: 0 0 1px 1px;
                border-style: solid;
                top: 0;
            }

            .sidebar--navigation {
                text-align: left;

                .navigation--entry {
                    display: block;
                }

                .navigation--link {
                    .unitize-padding(3, 0);
                }

                .link--logout {
                    .unitize-padding(10, 0, 0, 23);

                    &:before {
                        .unitize(left, 2);
                    }
                }

                .link--abort {
                    .unitize(padding-top, 0);
                    .unitize(margin-top, 0);
                    border-top: 0 none;
                    white-space: nowrap;
                }
            }
        }
    }

    .main-search--results {
        .clearfix();
        .unitize-width(450);
        .unitize(-225, 16, margin-left);
        .unitize(top, 55);
        left: 50%;
    }
}

    // Tablet Landscape styling for the global shop header
@media screen and (min-width: @tabletLandscapeViewportWidth) {

    .header-main {
        .logo-main { width: 30%; }
        .shop--navigation { width: 70%; }
    }

    .shop--navigation {
        .entry--search {
            width: 40%;
            margin-right: 8%;
        }
    }

    // Small Checkout & Registration Header
    .is--ctl-checkout.is--minimal-header,
    .is--ctl-register.is--minimal-header,
    .is--ctl-register.is--minimal-header.is--target-checkout {

        .header-main {
            .box-shadow(0 1px 2px 0 @border-color);

            .logo--shop { width: 30% }
            .logo--supportinfo { width: 35%; }

            .btn--back-top-shop {
                display: inline-block;
                float: right;
            }
        }
    }

    .navigation--list {

        // Reset the button width
        .navigation--entry .btn { width: auto; }

        // Custom styling cart button
        .entry--cart {
            .cart--link {
                .unitize(padding-left, 50);
                .cart--quantity { display: inline-block; }
                .cart--amount {
                    display: inline-block;
                    color: @brand-primary;
                    font-weight: @font-bold-weight;
                }
            }

            .icon--basket {
                .unitize(left, 8);
                display: block;
                position: absolute;
                top: 50%;
            }
        }

        .entry--account {

            .account--link {
                .unitize(padding-left, 36);
                &.account--user-loggedin:after {
                    content: none;
                    display: none;
                }

            }

            .icon--account {
                .unitize(left, 8);
                display: block;
                position: absolute;
                top: 50%;
            }
        }

        .account--display {
            display: inline-block;
        }

        .account--display.navigation--personalized {
            .unitize(line-height, 16);
            .unitize(font-size, 12);
            .unitize(max-width, 90);
            .unitize(margin-top, 2);
            text-align: left;

            .account--display-greeting {
                display: block;
                text-overflow: ellipsis;
                overflow: hidden;
                white-space: nowrap;
                font-weight: @font-bold-weight;
            }
        }

    }
}

    // Desktop styling for the global shop header
@media screen and (min-width: @desktopViewportWidth) {

    .header-main {
        .top-bar { .unitize(margin-bottom, 2); }
        .logo--shop { width: 75% }
    }

    // Small Checkout & Registration Header
    .is--ctl-checkout.is--minimal-header,
    .is--ctl-register.is--minimal-header,
    .is--ctl-register.is--minimal-header.is--target-checkout {

        .header-main {
            .box-shadow(0 1px 2px 0 @border-color);

            .logo-main { padding-right: 0; }
            .logo--shop { width: 30% }
            .logo--supportinfo { width: 35%; }

            .btn--back-top-shop {
                display: inline-block;
                float: right;
            }
        }
    }

    // General shop navigation
    .shop--navigation {
        width: 75%;

        .navigation--link {
            .unitize-padding(8, 16, 16);
        }

        .entry--link {
            .unitize(font-size, 14);
        }

        .entry--trigger {
            .unitize(margin-right, 14);
        }

        // Search entry
        .entry--search { width: 40%; }

        // Reset the right margin for desktop
        .entry--cart { margin-right: 0; }
    }

    .account--menu.is--personalized {
        .navigation--link.navigation--personalized {
            padding-bottom: 0;
        }
    }

    // Topbar navigation
    .header-main .top-bar--navigation {
        .service--list {
            right:  0;
        }

        .navigation--entry:last-child {
            padding-right: 0;
        }
    }

    .cart--display {
        .unitize-margin(0, 25, 0, 5, 16);
        font-weight: @font-bold-weight;
        color: @text-color;
    }
}