@use '../utils' as *;

.mean-container a.meanmenu-reveal {
    display: none;
}

.mean-container .mean-nav {
    background: none;
    margin-top: 0;
}

.mean-container .mean-bar {
    padding: 0;
    min-height: auto;
    background: none;
}

.mean-container .mean-nav > ul {
    padding: 0;
    margin: 0;
    width: 100%;
    list-style-type: none;
    display: block !important;
}

.mean-container a.meanmenu-reveal {
    display: none !important;
}

.mean-container .mean-nav ul li a {
    width: 100%;
    padding: 10px 0;
    color: #fff;
    font-size: 16px;
    line-height: 1.5;
    font-weight: 500;
    text-transform: capitalize !important;

    &:hover {
        color: var(--tp-text-primary);
    }
}

.mean-container .mean-nav ul li a.mean-expand {
    margin-top: 8px;
    padding: 0 !important;
    line-height: 14px;
    border: 1px solid #fff3 !important;
    height: 26px;
    width: 26px;
    line-height: 26px;
    color: #fff;
    top: 0;
    font-weight: 400;

    &:hover {
        background: var(--clr-theme-1);
        color: var(--tp-text-primary);
        border-color: var(--clr-theme-1);
    }
}

.mean-container .mean-nav ul li > a > i {
    display: none;
}

.mean-container .mean-nav ul li > a.mean-expand i {
    display: inline-block;
    font-size: 14px;
}

.mean-container .mean-nav > ul > li:first-child > a {
    border-top: 0;
}

.mean-container .mean-nav ul li a.mean-expand.mean-clicked {
    color: var(--tp-heading-secondary);
}

.mean-container .mean-nav ul li a.mean-expand.mean-clicked i {
    transform: rotate(45deg);
    color: var(--tp-text-primary);
}

.mean-container .mean-nav {
    & ul {
        & .home-menu-style {
            & li {
                & a {
                    text-align: center;
                }
            }
        }

        & li {
            & a {
                &:hover {
                    & img {
                        transform: scale(0.92);
                    }
                }

                & img {
                    @include transition(0.3s);
                    width: 100%;
                    margin-bottom: 5px;
                }
            }
        }
    }
}