@use '../../utils' as *;

/*----------------------------------------*/
/*  3.2 header-2
/*----------------------------------------*/
.header-1 {
    &.rs-sticky {
        
        .header__btn {
            
            
            .text {
                h5, span {
                    color: var(--rr-common-white);
                }
                
                a {
                    &:hover h5 {
                        color: var(--rr-theme-primary);
                    }
                }
            }
        }
        
        .main-menu {
            & ul{
                & li{
                    > a {
                        color: var(--rr-heading-primary);
                        &::before {
                            background: var(--rr-theme-primary);
                        }
                    }
                    & .submenu{
                        
                        & li{
                            & a{
                                &:hover {
                                    color: var(--rr-theme-primary);
                                    &::before {
                                        background: var(--rr-theme-primary);
                                    }
                                }
                            }
                            &:hover{
                                & > a{
                                    color: var(--rr-theme-primary);
                                    &::before{
                                        background-color: var(--rr-theme-primary);
                                    }
                                }
                            }
                            &.has-dropdown{
                                &:hover{
                                    & > a{
                                        &::after{
                                            color: var(--rr-theme-primary);
                                        }
                                    }
                                }
                            }
                            
                        }
                    }
                    & .mega-menu{
                        & li{
                            & ul{
                                & li{
                                    &:hover{
                                        & > a{
                                            color: var(--rr-theme-primary);
                                            &::before{
                                                background: var(--rr-theme-primary);
                                            }
                                        }
                                    }
                                    
                                }
                            }
                            
                            &:hover{
                                & > .mega-menu-title{
                                    color: var(--rr-theme-primary);
                                }
                            }
                        }
                    }
                    
                    &:hover{
                        & > a{
                            color: var(--rr-theme-primary);
                            
                            &::after{
                                color: var(--rr-theme-primary);
                            }
                        }
                    }
                }
            }
        }
    }
}
#popup-search-box {
    background-color: var(--rr-common-white);
    position: fixed;
    width: 100%;
    height: 20%;
    top: -100%;
    left: 0;
    right: 0;
    white-space: nowrap;
    z-index: 99;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: 500ms ease all;
    -moz-transition: 500ms ease all;
    transition: 500ms ease all;
    .box-inner-wrap {
        position: relative;
        width: 100%;
        height: 100%;
        box-shadow: 0px 0px 60px 0px rgba(0, 0, 0, 0.05);
        form {
            position: relative;
            width: 100%;
            max-width: 560px;
            margin: 0 auto;
            padding: 0 15px;
            input {
                width: 100%;
                padding: 20px 15px;
                padding-right: 80px;
                background: transparent;
                border: none;
                color: #ddd;
                border: 1px solid var(--rr-common-black);
                color: #666;
                font-size: 16px;
                &:focus {
                    outline: none;
                }
            }
        }
        &:hover {
            cursor: url(../img/cross.png), auto;
        }
        .search-close{
            position: absolute;
            top: 30px;
            right: 50px;
            color: var(--rr-heading-primary);
            border: 1px solid var(--rr-heading-primary);
            height: 50px;
            width: 50px;
            font-size: 20px;
            border-radius: 50%;
            cursor: pointer;
			display: flex;
			justify-content: center;
			align-items: center;
            &:hover{
                background-color: var(--rr-theme-primary);
                border: 1px solid var(--rr-theme-primary);
                color: var(--rr-common-white);
            }
        }
    }
    &.toggled {
        top: 0;
        opacity: 1;
        visibility: visible;
    }
}