@use "../common/utils" as *;
@use "../common/mixins" as *;

.header {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
    background: rgba(var(--color-background), 1);
    padding: calc-rem(15px 0);
    transition: padding .1s ease;

    @include media-breakpoint-up(lg) {
        padding: 0;
    }

    &--scrolled {
        background: #FFF;
        padding: calc-rem(10px 0);
        border-bottom: 1px solid rgba(var(--color-secondary), 0.1);
        transition: padding .1s ease;

        @include media-breakpoint-up(lg) {
            padding: 0;
        }

        .header__left > ul > li > a{
            transition: padding .1s ease;
            padding: calc-rem(20px 0);
        }

        .header__icons > li.has-submenu > ul {
            padding-top: calc-rem(8px);
        }
    }

    &__inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: relative;
    }

    &__left {
        display: flex;
        align-items: center;

        > a {
            margin-right: calc-rem(25px);

            @media (min-width: 1440px) {
                margin-right: calc-rem(25px);
            }

            @media (min-width: 1680px) {
                margin-right: calc-rem(50px);
            }

            img {
                width: calc-rem(142px);
                height: auto;
                object-fit: contain;

                @include media-breakpoint-up(lg) {
                    width: calc-rem(206px);
                }
            }
        }

        > ul {
            display: none;
            align-items: center;
            margin: 0;
            padding: 0;
            list-style: none;
            gap: calc-rem(25px);

            @include media-breakpoint-up(lg) {
                display: flex;
            }

            > li {
               > a {
                    position: relative;
                    font-size: calc-rem(14px);
                    font-weight: 500;
                    color: rgba(var(--color-secondary), 1);
                    padding: calc-rem(43px 0);
                    display: block;
                    transition: padding .1s ease;
                }

                &.has-megamenu,
                &.has-submenu {
                    > a {
                        padding-right: calc-rem(15px);

                        &::after {
                            transition: transform 0.2s ease;
                            content: '';
                            position: absolute;
                            right: 0;
                            top: calc(50% - 2px);
                            width: calc-rem(8px);
                            height: calc-rem(4px);
                            background: url('../images/icons/icon-dropdown.svg') no-repeat;
                            background-size: contain;
                        }
                    }

                    &:hover > a {
                        text-decoration: underline;
                        display: inline-block;
                        text-underline-offset: calc-rem(5px);
                        text-decoration-color: rgba(var(--color-primary), 1);

                        &:after {
                            transform: rotate(180deg);
                            transition: transform 0.2s ease;
                        }
                    }
                }

                &.has-megamenu {
                    &:hover .megamenu {
                        visibility: visible;
                        clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 100%);
                        transition: visibility 0s, clip-path 0.2s ease-in-out;
                    }
                }

                &.has-submenu {
                    position: relative;

                    > ul {
                        visibility: hidden;
                        clip-path: polygon(0 0, 100% 0%, 100% 0, 0 0);
                        transition: clip-path 0.2s ease-in-out, visibility 0s 0.2s;
                        margin-left: calc-rem(-20px);
                        position: absolute;
                        left: 0;
                        background: #FFF;
                        overflow: hidden;
                        border-radius: calc-rem(10px);
                        border: 1px solid rgba(var(--color-border), 1);

                        li {
                            a {
                                min-width: calc-rem(220px);
                                display: block;
                                background: #FFF;
                                padding: calc-rem(8px 20px);

                                &:hover {
                                    color: rgba(var(--color-primary), 1);
                                    background: rgba(var(--color-background), .5);
                                }
                            }
                        }
                    }

                    &:hover > ul {
                        visibility: visible;
                        clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 100%);
                        transition: visibility 0s, clip-path 0.2s ease-in-out;
                    }
                }
            }
        }
    }

    &__right {
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }

    &__search {
        position: relative;
        display: none;
        margin-right: 10px;

        @media (min-width: 1400px) {
            display: flex;
        }

        &:before {
            position: absolute;
            content: '';
            left: calc-rem(15px);
            top: calc-rem(12px);
            background: url('../images/icons/icon-search.svg') no-repeat;
            background-size: contain;
            width: calc-rem(20px);
            height: calc-rem(20px);
            z-index: 5;
        }

        input {
            height: calc-rem(45px);
            border-radius: calc-rem(25px);
            border: 1px solid rgba(var(--color-border));
            padding: calc-rem(15px 15px 15px 45px);
            width: 100%;
            font-size: calc-rem(14px);

            @include media-breakpoint-up(lg) {
                width: calc-rem(280px);
            }

            @include media-breakpoint-up(xxl) {
                width: calc-rem(345px);
            }

            &::placeholder {
                color: rgba(var(--color-secondary), 0.5);
                font-weight: 500;
            }
        }
    }

    &__cta {
        flex-shrink: 0;
        position: relative;
        border-radius: calc-rem(25px);
        background-color: rgba(var(--color-secondary), 1);
        padding: calc-rem(5px 15px 5px 5px);
        align-items: center;
        gap: 10px;
        color: #FFF;
        font-weight: 500;
        font-size: calc-rem(12px);
        display: none;
        height: calc-rem(35px);

        @include media-breakpoint-up(xl) {
            display: flex;
        }

        @include media-breakpoint-up(lg) {
            height: calc-rem(45px);
            font-size: calc-rem(14px);
        }

        img {
            height: calc-rem(25px);
            width: calc-rem(25px);

            @include media-breakpoint-up(lg) {
                height: calc-rem(35px);
                width: calc-rem(35px);
            }
        }

        &:after {
            content: '';
            position: absolute;
            top: -2px;
            right: 5px;
            background: rgba(var(--color-primary), 1);
            width: calc-rem(12px);
            height: calc-rem(12px);
            border-radius: calc-rem(24px);
            border: 2px solid rgba(var(--color-background));
        }
    }

    &__icons {
        list-style: none;
        margin: calc-rem(0 0 0 10px);
        padding: 0;
        display: flex;
        align-items: center;
        gap: calc-rem(10px);

        > li {
            > a, > button {
                cursor: pointer;
                display: flex;
                align-items: center;
                justify-content: center;
                border: 1px solid rgba(var(--color-border));
                background: #FFF;
                border-radius: 9999px;
                width: calc-rem(35px);
                height: calc-rem(35px);
                transition: background 0.2s ease;

                @include media-breakpoint-up(lg) {
                    width: calc-rem(45px);
                    height: calc-rem(45px);
                }


                img {
                    width: calc-rem(12px);
                    object-fit: contain;

                    @include media-breakpoint-up(lg) {
                        width: calc-rem(15px);
                    }
                }

                &:hover {
                    transition: background 0.2s ease;
                    background: rgba(var(--color-secondary), 0.1);
                }
            }

            &.has-submenu {
                position: relative;

                > ul {
                    padding-top: calc-rem(31px);
                    visibility: hidden;
                    clip-path: polygon(0 0, 100% 0%, 100% 0, 0 0);
                    transition: clip-path 0.2s ease-in-out, visibility 0s 0.2s;
                    margin-right: calc-rem(-20px);
                    position: absolute;
                    right: 0;
                    top: 100%;

                    li {
                        background: #FFF;
                        overflow: hidden;
                        border-left: 1px solid rgba(var(--color-border), 1);
                        border-right: 1px solid rgba(var(--color-border), 1);

                        a {
                            min-width: calc-rem(220px);
                            display: block;
                            background: #FFF;
                            padding: calc-rem(8px 20px);

                            &:hover {
                                color: rgba(var(--color-primary), 1);
                                background: rgba(var(--color-border));
                            }
                        }

                        &.border-top {
                            border-top: 1px solid rgba(var(--color-border), 1);
                        }

                        &:first-child {
                            border-top: 1px solid rgba(var(--color-border), 1);
                            border-top-left-radius: calc-rem(10px);
                            border-top-right-radius: calc-rem(10px);
                        }

                        &:last-child {
                            border-bottom: 1px solid rgba(var(--color-border), 1);
                            border-bottom-left-radius: calc-rem(10px);
                            border-bottom-right-radius: calc-rem(10px);
                        }
                    }
                }

                &:hover > ul {
                    visibility: visible;
                    clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 100%);
                    transition: visibility 0s, clip-path 0.2s ease-in-out;
                }
            }
        }
    }

    &__search-icon {
        display: flex;

        @media (min-width: 1400px) {
            display: none;
        }
    }

    &__offcanvas {
        display: flex;

        @include media-breakpoint-up(lg) {
            display: none;
        }

        button {
            background: rgba(var(--color-primary), 1) !important;
        }
    }

    &__cart,
    &__wishlist {
        position: relative;

        .badge {
            position: absolute;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(var(--color-primary), 1);
            width: calc-rem(18px);
            height: calc-rem(18px);
            top: -6px;
            right: -6px;
            border-radius: calc-rem(18px);
            border: 2px solid rgba(var(--color-background));
            font-size: calc-rem(9px);
            font-weight: bold;
            color: #FFF;

            @include media-breakpoint-up(lg) {
                width: calc-rem(24px);
                height: calc-rem(24px);
                border-radius: calc-rem(24px);
            }
        }
    }

    &__wishlist {
        display: none;

        @include media-breakpoint-up(lg) {
            display: flex;
        }
    }
}
