@import "styles/colors";
@import "styles/variables";


:host /deep/ .nav {
    list-style: none;
    & > li:not(:empty) {
        & > a {
            line-height: 21px;
            background-color: inherit;
            font-family: @notoFont;
            font-size: 14px;
            color: @navElement;
            cursor: pointer;
            @media (min-width: 768px) {
                height: 55px;
            }
        }
        &.active {
            & > a {
                @media (min-width: 768px) {
                    border-bottom: 4px solid @mainColor;
                }
                @media (max-width: 767px) {
                    border-left: 4px solid @mainColor;
                    background-color: @selectedMenuElement;
                }
            }
        }

        @media (max-width: 767px) {
            border-top: 1px solid @navSeparator;
        }

    }
    .b_dropdown-menu {
        & > li:not(:empty) {
            &.active {
                a {
                    border-left: 4px solid @mainColor;
                    background-color: @selectedMenuElement;
                }
            }
            a {
                display: flex;
                align-items: center;
                line-height: 21px;
                font-family: @notoFont;
                font-size: 14px;
                color: @navElement;
                cursor: pointer;
                @media (min-width: 768px) {
                    height: 35px;
                }
            }
        }
    }
}

#mainNav {
    float: none;
    margin-bottom: 0;
    margin-top: 0;
    .show_more {
        display: block !important;
        &.open {
            a {
                background-color: @navBackgroundCurElement;
            }
        }
    }
    .navbar-right {
        ul {
            margin: 0;
            li {
                & > a {
                    padding-left: 8px;
                    padding-right: 8px;
                }
            }
        }
    }
}