/*
==========================================
Header
==========================================
*/
#header {
    position: relative;
    z-index: 10;
    transition: padding 200ms;
    padding: 0 5%;
    background-position: center;
    background-size: cover;
    //margin-bottom: 1.875em;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
    align-items: center; // vertically
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    margin-bottom: 3.125rem;

    // Header Absolutte
    .absolutte-header-absolute & {
        position: absolute;
        margin-bottom: 0;
    }

    // Logo Wrap
    .absolutte-logo-wrap {
        margin: 7px 0;
        line-height: 0;
        flex-grow: 1;
        flex-basis: 100%;

        .site-title {
            margin: 0;
            display: inline-block;
            font-size: 22px;
            line-height: 0;

            .ql_logo {
                font-size: 22px;
                line-height: 22px;
                font-weight: bold;
                transition: all 400ms ease-in-out;
                display: inline-block;
                padding: 7px 0;
                position: relative;
                z-index: 4;

                &:hover {
                    text-decoration: none;
                }
            }

            .absolutte-logo-small {
                display: none;
            }
        }

        .site-description {
            font-size: 13px;
            margin-top: 5px;
        }

        #absolutte-nav-btn {
            position: absolute;
            top: 0;
            right: 5%;
        }
    }

    // Side Button
    .absolutte-header-side-btn-wrap {
        display: none;
    }

    // Main Navigation Wrap
    .absolutte-main-nav-wrap {
        flex-grow: 2;

        .navbar-collapse {
            padding: 0;
        }
    }

    .absolutte-second-nav-wrap {
        display: none;

        .navbar-collapse {
            padding: 0;
        }
    }

    .absolutte-icons-nav-wrap {
        //flex-grow: 1;
        flex-basis: fit-content;
        position: relative;
        margin-left: 10px;
        padding-left: 10px;

        &::before {
            position: absolute;
            content: "";
            top: 50%;
            left: 0;
            translate: 0, -50%;
            background-color: rgba(0, 0, 0, 0.1);
            width: 1px;
            height: 25px;
        }

        ul {
            list-style: none;
            margin: 0;
            padding: 0;

            li {
                display: inline-block;

                a {
                    padding: 14px 18px;
                    display: block;

                    .no-touch &:hover {
                        text-decoration: none;
                    }

                    i {
                        font-size: 20px;
                    }
                }
            }
        }
    }

    .absolutte-social-icons-nav-wrap {
        display: none;
    }

    .absolutte-nav-btn-wrap {
        display: none;

        .absolutte-nav-btn {
            background-color: transparent;
            border: none;
            padding: 15px 19px;
            display: block;

            .no-touch &:hover {
            }

            i {
                font-size: 20px;
            }
        }
    }

    &.absolutte-fixed-header {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;

        .absolutte-with-top-bar & {
            top: 34px;
        }
    }

    // Header 2
    &.absolutte-header-style-2 {
        .absolutte-logo-wrap {
            order: 2;
            text-align: center;
            flex-grow: 2;
            flex-basis: 20%;
        }

        .absolutte-main-nav-wrap {
            flex-grow: 1;
            text-align: left;
            flex-basis: 40%;
        }

        .absolutte-second-nav-wrap {
            flex-grow: 2;
            display: block;
            order: 3;
            flex-basis: 40%;
            text-align: right;
        }

        .absolutte-icons-nav-wrap {
            display: none;
        }
    }

    // Header 3
    &.absolutte-header-style-3 {
        .absolutte-logo-wrap {
            flex-grow: 1;
            //flex-basis: 20%;
        }

        .absolutte-main-nav-wrap {
            display: none;
        }

        .absolutte-second-nav-wrap {
            display: none;
        }

        .absolutte-icons-nav-wrap {
            flex-grow: 1;
            //flex-basis: 80%;
            text-align: right;

            &::before {
                display: none;
            }
        }
    }

    // Header 4
    &.absolutte-header-style-4 {
        .absolutte-logo-wrap {
            flex-grow: 1;
            //flex-basis: 20%;
        }

        .absolutte-main-nav-wrap {
            flex-grow: 5;
            text-align: left;
        }

        .absolutte-second-nav-wrap {
            display: none;
        }

        .absolutte-icons-nav-wrap {
            flex-grow: 1;
            //flex-basis: 80%;
            text-align: right;

            &::before {
                display: none;
            }
        }
    }

    // Header 5
    &.absolutte-header-style-5 {
        .absolutte-logo-wrap {
            flex-grow: 1;
            //flex-basis: 20%;
        }

        .absolutte-main-nav-wrap {
            flex-grow: 5;
            text-align: left;
        }

        .absolutte-second-nav-wrap {
            display: none;
        }

        .absolutte-icons-nav-wrap {
            display: none;
        }

        .absolutte-social-icons-nav-wrap {
            flex-grow: 1;
            display: block;
        }
    }

    // Header 6
    &.absolutte-header-style-6 {
        .absolutte-nav-btn-wrap {
            display: block;
            flex-grow: 1;
        }

        .absolutte-logo-wrap {
            flex-grow: 12;
        }

        .absolutte-main-nav-wrap {
            display: none;
        }

        .absolutte-second-nav-wrap {
            display: none;
        }

        .absolutte-icons-nav-wrap {
            display: block;
            flex-grow: 2;
            text-align: right;

            &::before {
                display: none;
            }
        }

        .absolutte-social-icons-nav-wrap {
            display: none;
        }
    }

    // Header 7
    &.absolutte-header-style-7 {
        .absolutte-nav-btn-wrap {
            display: block;
            flex-grow: 2;
            flex-basis: 10%;
        }

        .absolutte-logo-wrap {
            flex-grow: 4;
            text-align: center;
        }

        .absolutte-main-nav-wrap {
            display: none;
        }

        .absolutte-second-nav-wrap {
            display: none;
        }

        .absolutte-icons-nav-wrap {
            display: block;
            flex-grow: 2;
            flex-basis: 10%;
            text-align: right;

            &::before {
                display: none;
            }
        }

        .absolutte-social-icons-nav-wrap {
            display: none;
        }
    }

    // Header 8
    &.absolutte-header-style-8 {
        .absolutte-nav-btn-wrap {
            display: none;
        }

        .absolutte-logo-wrap {
            flex-basis: 40%;
        }

        .absolutte-main-nav-wrap {
            display: block;
            order: 4;
            text-align: left;
            border-top: 1px solid rgba(0, 0, 0, 0.1);
        }

        .absolutte-second-nav-wrap {
            display: none;
        }

        .absolutte-icons-nav-wrap {
            display: block;
            flex-basis: 60%;
            margin-left: 0;
            text-align: right;

            &::before {
                display: none;
            }
        }

        .absolutte-social-icons-nav-wrap {
            display: none;
        }
    }

    // Header 9
    &.absolutte-header-style-9 {
        .absolutte-icons-nav-wrap {
            display: none;
        }
    }
}

// Small and up
@include media-breakpoint-up(sm) {
    #header {
        // Logo Wrap
        .absolutte-logo-wrap {
            flex-basis: auto;
        }

        .absolutte-main-nav-wrap {
            flex-basis: auto;
            text-align: right;
        }

        &.absolutte-header-absolute {
            position: absolute;
            top: 0;
            width: 100%;
            left: 0;
            z-index: 5;

            .absolutte-logo-wrap .site-title .ql_logo {
                color: #fff;
            }
        }
    }
}