.wg-tab {
    overflow: auto;

    &::-webkit-scrollbar {
        display: none;
    }

    ul {
        max-width: max-content;
        @include d-flex();
        gap: 30px;
        border-bottom: 1px solid var(--white);

        li {
            a {
                @include d-flex();
                align-items: center;
                gap: 7px;
                padding-right: 14px;
                padding-bottom: 14px;
                position: relative;

                i {
                    font-size: 10px;
                }

                &::before {
                    content: "";
                    position: absolute;
                    bottom: -1px;
                    left: auto;
                    right: 0;
                    height: 1px;
                    width: 0;
                    background-color: var(--primary);
                    @include transition3();
                }

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

                    &:before {
                        left: 0;
                        right: auto;
                        width: 100%;
                    }
                }
            }

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

    &.style-2 {

        ul {
            max-width: 100%;
            min-width: max-content;
            @include d-flex();
            justify-content: center;
            gap: 49px;
            border-bottom: 0;

            li {
                a {
                    @include d-flex();
                    align-items: center;
                    padding-right: 0;
                    padding-bottom: 20px;
                    position: relative;

                    &::before {
                        height: 3px;
                    }

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

                        &:before {
                            left: 0;
                            right: auto;
                            width: 100%;
                        }
                    }
                }

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

.flat-animate-tab {
    overflow: hidden;
}


.tab-content {
    position: relative;

    .tab-pane {
        display: block;
        pointer-events: none;
        opacity: 0;
        visibility: hidden;
        position: absolute;
        z-index: 1;
        top: 0;
        left: 0;
        right: 0;
        -webkit-transform: translateY(30px);
        -ms-transform: translateY(30px);
        transform: translateY(30px);
        transition-timing-function: ease-in;
        transition-duration: 0.2s;

        &.active {
            pointer-events: auto;
            opacity: 1;
            visibility: visible;
            position: relative;
            z-index: 2;
            -webkit-transform: none;
            -ms-transform: none;
            transform: none;
            transition-timing-function: ease-out;
            transition-duration: 0.3s;
            transition-delay: 0.3s;
        }
    }
}