:root{
    --nb-menu-navigation-with-tabs-link-fs: 16px;
    --nb-menu-navigation-with-tabs-link-lh: 20px;
    --nb-menu-navigation-with-tabs-link-fw: 400;
    --nb-menu-navigation-with-tabs-link-color: var(--nb-color-white);
    --nb-menu-navigation-with-tabs-link-hover-color: var(--nb-color-white);
    --nb-menu-navigation-with-tabs-link-hover-bg: var(--nb-spec-color);
}

.nb-menu-navigation-with-tabs {

    .nb-tabs-wrapper{
        display: flex;
        gap: 5px;
        flex-wrap: nowrap;
        overflow: auto;
        margin-bottom: 24px;
        padding-bottom: 10px;

        /* Scroll width */
        &::-webkit-scrollbar {
            height: 5px;
            cursor: pointer;
            padding: 2px;
        }
        /* Track */
        &::-webkit-scrollbar-track {
            background: transparent;
        }
        /* Handle */
        &::-webkit-scrollbar-thumb:hover,
        &::-webkit-scrollbar-thumb {
            background: gray;
            cursor: pointer;
        }

        .nb-tab{
            font-size: var(--nb-menu-navigation-with-tabs-link-fs);
            line-height: var(--nb-menu-navigation-with-tabs-link-lh);
            padding: 2px 4px;
            cursor: pointer;
            font-weight: var(--nb-menu-navigation-with-tabs-link-fw);
            transition: all .3s ease-in-out;
            white-space: nowrap;
            border-radius: 2px;
            color: var(--nb-menu-navigation-with-tabs-link-color);

            &:hover, &.active{
                color: var(--nb-menu-navigation-with-tabs-link-hover-color);
                background: var(--nb-menu-navigation-with-tabs-link-hover-bg);
            }
        }
    }

    &:has(.tab-content .nb-item.active) .nb-tabs-wrapper{
        display: none;
    }

    &:has(.tab-content .nb-item.active) .nb-item.active{
        margin-top: 0;
    }

    .tab-content {

        .menu-subtree:has(.nb-item.active) > .nb-item:not(.active){
            display: none;
        }

        .menu-subtree:has(.nb-item.active) > .nb-item.active{
            & > .nb-link{
                padding-left: 30px;
                margin-bottom: 35px;
            }
            & > .nb-icon{
                left: 0;
                right: unset;
                transform: rotateZ(180deg);
            }
        }

        .nb-item.active:has(.nb-item.active) > .nb-link{
            display: none;
        }

        .nb-item {

            margin-top: 22px;
            position: relative;

            .nb-icon{
                position: absolute;
                right: 0;
                top: 0;
                color: var(--nb-menu-navigation-with-tabs-link-color);
                pointer-events: none;
            }

            .menu-subtree{
                display: none;
            }

            &.active {
                >.menu-subtree{
                    display: block;
                }
            }

            .nb-link{
                display: block;
                font-size: 16px;
                line-height: 20px;
                color: var(--nb-menu-navigation-with-tabs-link-color);
            }

        }

        ul {
            list-style-type: none;
            padding: 0; /* optional: removes the indent */
            margin: 0;  /* optional: removes the margin */
        }
    }
}