// Main menu navigation bar styles
.menu-bar {
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.25);

    .nav-link a {
        font-weight: 500;
        color: $nav-link-color;
    }

    a:hover {
        text-decoration: none;
    }

    .nav-item:hover {
        background-color: $menu-bar-hover;
        border-radius: 2px;
    }

    .navbar-nav > li {
        position: relative;
    }

    .active .nav-link::after {
        content: '';
        border-bottom: 4px solid $nav-link-active-color;
        left: 0;
        right: 0;
        position: absolute;
        bottom: -8px;
    }

    .active .nav-link a {
        color: $nav-link-active-color;
    }

    .dropdown {
        position: relative;
        display: inline-block;
    }

    .dropdown:hover .dropdown-content {display: block;}
}


// Tab menu navigation bar styles
[data-tab-content] {
    display: none;
}

.active[data-tab-content] {
    display: block;
}

.sub-tabs {
    display: flex;
    list-style-type: none;
    margin: 0;
    padding: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    margin-top: 0.5rem;

    .sub-tab {
        cursor: pointer;
        padding: 0.5rem 1rem;
        border-radius: 5px;
        border-radius: 4px;
        margin-bottom: 6px;
        position: relative;

        &:hover {
            background-color: #e2e2e2;
        }
    }

    .sub-tab-link{
        font-weight: 500;
        font-size: large;
        color: $nav-link-color;

        &.sm {
            font-size: medium;
        }
    }
}

.sub-tab.active .sub-tab-link::after {
    content: '';
    border-bottom: 3px solid $nav-link-active-color;
    left: 0;
    right: 0;
    position: absolute;
    bottom: -7px;
}

.sub-tab.active .sub-tab-link {
    color: $nav-link-active-color;
}