@import "../../../bootstrap/variables";

@keyframes slideDown {
    from {
        transform: translateY(-100%);
    }
    to {
        transform: translateY(0);
    }
}

.theme-header-1 {
    position: relative;
    margin-bottom: -84px;
    z-index: 150;


    &__top-navbar {
        width: 100%;
        height: 114px;

        &-search {
            width: 100%;
            height: 48px;

            input {
                width: 100%;
                height: 100%;
                border-radius: 12px;
                border: 1px solid var(--white) !important;
                opacity: 0.5;

                &::placeholder {
                    color: var(--white);
                    opacity: .7;
                }

                &:focus, &:checked, &:active {
                    background-color: transparent !important;

                }
            }

            .search-icon {
                position: absolute;
                top: 16px;
                bottom: 16px;
                right: 16px;
            }
        }

        &-cart-counter {
            position: absolute;
            top: -4px;
            right: -4px;
            background-color: var(--danger);
            border-radius: 50%;
            width: 16px;
            height: 16px;
        }

        @media (max-width: $screen-sm-max) {
            height: auto;
        }
    }


    &__dropdown {

        &-user-verify-badge {
            position: absolute;
            bottom: 0;
            right: 0;
            width: 14px;
            min-width: 14px;
            height: 14px;
        }

        &:not(:hover) > .header-1-dropdown-menu {
            visibility: hidden;
            opacity: 0;
            -webkit-transform: translateY(15px);
            -moz-transform: translateY(15px);
            -ms-transform: translateY(15px);
            -o-transform: translateY(15px);
            transform: translateY(15px);
        }


        .header-1-dropdown-menu {
            position: absolute;
            top: 40px;
            left: 0;
            width: 260px;
            background: var(--white);
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
            border-radius: 10px;
            transition: all 0.3s ease;
            z-index: 46;

            .rtl & {
                left: auto;
                right: 0;
            }

            &.auth-user-info-dropdown-menu {
                width: 280px;
                top: 40px;

                .header-1-dropdown-menu__item {
                    transition: all .3s ease;

                    &, & a, & .icons {
                        color: var(--gray-500);
                    }

                    .count-badge {
                        min-width: 16px;
                        height: 16px;
                    }

                    &:hover {
                        background-color: var(--gray-100);

                        & > a {
                            transform: translateX(8px);
                        }

                        &, & a, & .icons {
                            color: var(--primary);
                        }
                    }
                }

                @media (max-width: $screen-sm-max) {
                    right: 8px;
                    left: auto;

                    .rtl & {
                        left: 8px;
                        right: auto;
                    }
                }
            }

            &__item {
                color: var(--gray-500);
                border-left: 2px solid transparent;

                & > div {
                    transition: all .3s ease;
                }

                &.active {
                    border-left: 2px solid var(--primary);
                    font-weight: bold;
                }

                .rtl & {
                    border-left: none;
                    border-right: 2px solid transparent;

                    &.active {
                        border-left: none;
                        border-right: 2px solid var(--primary);
                    }
                }

                &:hover {
                    background-color: var(--gray-100);

                    & > div {
                        transform: translateX(8px);
                    }

                    .header-1-dropdown-menu__item-sign-box {
                        background-color: var(--gray-200);
                    }

                    .header-1-dropdown-menu__sub-menu {
                        opacity: 1;
                        visibility: visible;
                        left: calc(100% + 4px);

                        .rtl & {
                            left: auto;
                            right: calc(100% + 4px);
                        }
                    }
                }

                &-sign-box {
                    min-width: 32px;
                    height: 32px;
                    background-color: var(--gray-100);
                    color: var(--gray-500);
                    font-weight: normal !important;
                }
            }

            &__sub-menu {
                position: absolute;
                top: -8px;
                left: 96%;
                width: 280px;
                border-radius: 24px;
                background: var(--white);
                box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.02);
                transition: all 0.3s ease;
                visibility: hidden;
                opacity: 0;

                .rtl & {
                    left: auto;
                    right: 96%;
                }

                li {
                    transition: all .3s ease;

                    &, & * {
                        color: var(--gray-500) !important;
                    }

                    &:hover {
                        * {
                            color: var(--primary) !important;
                        }

                        & > a {
                            transform: translateX(8px) !important;
                        }
                    }
                }
            }

            &__flag {
                width: 32px;
                min-width: 32px;
                height: 32px;

                &, & img {
                    border-radius: 8px;
                }
            }

        }

    }


    &__main {
        position: relative;
        height: 84px;
        top: -42px;
        margin-bottom: -42px;

        &.sticky {
            position: fixed;
            top: 20px;
            width: 100%;
            animation: slideDown 0.5s ease forwards;
        }

        &-mask {
            position: absolute;
            top: 8px;
            left: 16px;
            right: 16px;
            bottom: -8px;
            border-radius: 24px;
            opacity: 0.5;
            background: var(--white);
            z-index: 1;
        }

        @media (max-width: $screen-sm-max) {
            height: auto;
        }
    }

    &__logo {
        height: 44px;

        img {
            height: 100%;
        }
    }

    &__categories {

        .cat-dropdown-menu-icon {
            width: 24px;
            max-width: 24px;
            min-width: 24px;
        }

    }
}