@use "../../../../../../dev/assets/sass/_settings/mixinscontrast" as *;

.mod-header {
    position: relative;
    width: 100%;
    z-index: 9999;
    height: 120px;
    transition: all 0.3s ease;
    background: $color-white;

    &.is-sticky {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1000;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    }

    body.is-contrast & {
        background: $color-black;
    }

    > .m-wrapper {
        &.is-contrast {
            @include contrast-theme($color-black, $color-white, false);
        }

        > .m-container-header {
            position: relative;
            max-width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            height: 120px;
            margin: 0 auto;

            @include mq(desktop) {
                max-width: 1440px;
                height: 100%;
            }

            @include mq(desktop-l) {
                max-width: 1440px;
            }

            > .m-logo {
                max-width: 100px;
                width: 100%;
                height: auto;

                @include mq(desktop-l) {
                    max-width: 150px;
                }

                > a {
                    max-width: 100px;
                    height: auto;
                    width: 100%;

                    @include mq(desktop) {
                        max-width: 200px;
                        height: 120px;
                    }

                    > img {
                        transition: all 0.3s ease-in-out;
                        width: 100%;
                        height: 100%;

                        body.is-contrast & {
                            filter: brightness(2);
                        }
                    }
                }
            }

            > .m-navigation {
                padding-top: 25px;

                > .m-menu-icon {
                    position: absolute;
                    right: 0;
                    top: 74px;
                    transform: translateY(-50%);
                    cursor: pointer;

                    @include mq(desktop) {
                        display: none;
                    }

                    > .m-line {
                        width: 28px;
                        height: 2px;
                        background-color: $color-primary;
                        margin: 5px 0;
                        display: block;

                        body.is-contrast & {
                            background-color: $color-white;
                        }
                    }
                }

                > .m-menu-close {
                    height: 18px;
                    width: 18px;
                    cursor: pointer;
                    position: absolute;
                    right: 0;
                    top: 55%;
                    display: none;

                    @include mq(tablet) {
                        transform: none;
                        top: 27px;
                    }

                    @include mq(desktop) {
                        display: none;
                    }

                    > svg {
                        fill: $color-primary;
                        stroke: $color-primary;
                        stroke-width: 0;
                        width: 18px;
                        height: 18px;

                        > path {
                            fill: $color-primary;
                            stroke: $color-primary;
                        }
                    }
                }

                > .m-menu {
                    position: absolute;
                    left: -16px;
                    display: flex;
                    justify-content: flex-start;
                    flex-direction: column;
                    list-style: none;
                    visibility: hidden;
                    height: calc(100vh - 70px);
                    max-height: none;
                    flex-wrap: nowrap;
                    width: 100vw;
                    top: 121px;
                    z-index: 100;
                    padding: 20px 0;

                    @include mq(desktop) {
                        background-color: transparent;
                        position: relative;
                        top: 0;
                        left: 0;
                        padding: 0;
                        height: 90px;
                        gap: 20px;
                        visibility: visible;
                        flex-direction: row;
                        width: 100%;
                    }

                    &.is-visible {
                        visibility: visible;
                        background: $color-white;

                        body.is-contrast & {
                            background: $color-black;
                        }
                    }

                    > .menu-item {
                        position: relative;
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        align-items: baseline;
                        padding: 10px 0;
                        width: calc(100% - 46px);
                        margin: 0 auto;

                        @include mq(desktop) {
                            align-items: center;
                        }

                        &:hover {
                            > .m-submenu {
                                @include mq(desktop) {
                                    display: table;
                                    z-index: 999999998;
                                    transform: translateY(0);
                                }
                            }
                        }

                        &:last-child {
                            margin-top: 40px;

                            @include mq(desktop) {
                                margin-top: 0;
                            }
                        }

                        &.has-children {
                            &:before {
                                content: '';
                                background-image: embed('/assets/img/svg/dropdownwhite.svg');
                                background-position: 50%;
                                background-repeat: no-repeat;
                                background-size: 100%;
                                display: block;
                                height: 25px;
                                position: absolute;
                                right: 25px;
                                top: 0;
                                width: 25px;

                                @include mq(desktop) {
                                    display: none;
                                }
                            }

                            &.opened {
                                &:before {
                                    transform: rotate(180deg);
                                    font-size: 25px;
                                }
                            }
                        }

                        > a {
                            color: $color-black;
                            text-transform: uppercase;
                            width: max-content;

                            &:hover {
                                color: $color-primary;
                            }
                        }

                        .m-language-search {
                            display: flex;
                            flex-direction: row-reverse;
                            align-items: center;
                            justify-content: space-between;
                            width: 100%;
                            margin: 0;
                            padding: 0;

                            @include mq(desktop) {
                                flex-direction: row;
                                gap: 20px;
                            }

                            > .m-search {
                                @include mq(desktop) {
                                    width: 14px;
                                }

                                > a {
                                    display: flex;
                                    justify-content: flex-end;

                                    svg {
                                        display: flex;
                                        left: unset;
                                        position: absolute;
                                        top: 2px;
                                        align-items: center;
                                        height: 100%;
                                        fill: $color-primary;
                                        stroke: $color-primary;
                                        stroke-width: 3px;

                                        @include mq(desktop) {
                                            left: 0;
                                        }
                                    }
                                }

                                &::marker {
                                    color: transparent;
                                }
                            }

                            > .m-language {
                                display: flex;
                                flex-direction: row;
                                gap: 10px;

                                > a {
                                    color: $color-black;
                                    text-transform: uppercase;

                                    &:last-child {
                                        border-left: 1px solid $color-black;
                                        padding-left: 13px;

                                        body.is-contrast & {
                                            border-left: 1px solid $color-white;
                                        }
                                    }
                                }
                            }
                        }

                        > .m-submenu {
                            position: relative;
                            left: -4px;
                            top: 0;
                            width: 100%;
                            display: none;
                            flex-direction: column;
                            align-items: baseline;
                            overflow: auto;
                            gap: 7px;
                            padding: 20px 25px 0;

                            @include mq(desktop) {
                                position: absolute;
                                top: 50px;
                                width: max-content;
                                padding: 64px 0 0;
                                max-height: calc(100vh - 225px);
                                min-height: max-content;
                            }

                            &.opened {
                                display: flex;
                            }

                            > li {
                                position: relative;
                                display: flex;
                                flex-direction: column;
                                justify-content: center;
                                align-items: baseline;
                                padding: 10px 0;
                                height: auto;
                                width: 100%;
                                border-bottom: 1px solid #ededed;

                                @include mq(desktop) {
                                    width: max-content;
                                    z-index: 0;
                                    margin: 0 auto;
                                    border-bottom: 0;
                                    align-items: center;
                                }

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

                                > a {
                                    color: $color-white;
                                    text-transform: uppercase;
                                    width: max-content;

                                    &:hover {
                                        color: $color-primary;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}