%nav-link {
    font-size: 15px;
    line-height: 26px;
    position: relative;
    padding: 13px 3px;
    color: var(--color-gray);
    border: none;
    border-radius: 0;
    transition: var(--transition-150);

    &.active {
        font-weight: var(--font-medium);
        color: var(--color-primary);

        &:before {
            width: 100%;
        }

        &:after {
            opacity: 1;
        }
    }

    &:before {
        position: absolute;
        content: "";
        left: 50%;
        bottom: 0;
        height: 1px;
        width: 0;

        background: var(--color-primary);
        transform: translateX(-50%);
        transition: 150ms ease-in-out;
    }

    &:after {
        position: absolute;
        content: "";
        left: 50%;
        bottom: -7px;
        height: 8px;
        width: 15px;

        background: var(--color-primary);
        border-bottom-left-radius: 12px;
        border-bottom-right-radius: 12px;
        opacity: 0;
        transform: translateX(-50%);
        transition: 150ms ease-in-out;
        z-index: 1;
    }

    &:hover:not(.active) {
        &:before {
            width: 40px;
        }
    }
}

.nav-tabs {
    border: none;

    .nav-item {
        &.loading {
            .nav-link {
                pointer-events: none;

                &:before {
                    left: 0;
                    top: auto;
                    transform: none;
                    animation: tab-loader 1.2s ease infinite;
                }

                &:after {
                    content: none;
                }
            }
        }
    }

    .nav-link {
        @extend %nav-link;
    }
}

.tabs:not(.featured-categories-tabs) {
    list-style: none;
    margin-bottom: -1px;

    .tab-item {
        @extend %nav-link;

        margin-right: 30px;
        cursor: pointer;
        transition: none;

        &:last-child {
            margin-right: 0;
        }

        &.active {
            font-weight: var(--font-medium);

            color: var(--color-primary);
            cursor: default;

            &:before {
                width: 100%;
            }

            &:after {
                opacity: 1;
            }
        }

        &.loading {
            pointer-events: none;

            &:before {
                left: 0;
                top: auto;
                transform: none;
                animation: tab-loader 1.2s ease infinite;
            }

            &:after {
                content: none;
            }
        }
    }
}