// Tabs.
.elementor-widget-tabs {
	// Base Theme Widget Styles.
    &.vamtam-has-theme-widget-styles {
        .elementor-tabs-wrapper {
            padding: inherit;
        }

        .elementor-tab-desktop-title {
            padding: 20px 25px;
        }

        .elementor-tab-title {
            padding: 20px;
            border-style: solid;
            border-width: 2px !important;
            border-color: var(--vamtam-accent-color-2);
            border-radius: 30px;
            text-align: center;
            margin: 15px 0px;

            >a {
                display: block;
                &:hover {
                    border-color: var(--vamtam-accent-color-1);
                }
            }
        }

        .elementor-tabs-wrapper {
            .elementor-tab-title {
                padding: 15px 40px;
                margin: 0 10px;
            }
        }

        .elementor-tab-title.elementor-active {
            background: var(--vamtam-accent-color-1);
            border-color: var(--vamtam-accent-color-1);
        }

        .elementor-tab-content {
            padding: 2em;
        }

		&.vamtam-tabs-simple-heading {
			.elementor-tab-title {
				a {
					background-image: linear-gradient( 120deg, transparent 0%, transparent 100%);
					&:hover {
						background-image: linear-gradient( 120deg, var( --vamtam-accent-color-3) 0%, var( --vamtam-accent-color-3) 100%);
						background-repeat: no-repeat;
						background-size: 100% 7px;
						background-position: 0 88%;
						transition: background-size 0.25s ease-in;
					}
				}

				&.elementor-active a {
					background-image: linear-gradient( 120deg, var( --vamtam-accent-color-3) 0%, var( --vamtam-accent-color-3) 100%);
					background-repeat: no-repeat;
					background-size: 100% 7px;
					background-position: 0 90%;
					transition: background-size 0.25s ease-in;
				}
			}

			.elementor-tab-title.elementor-tab-desktop-title {
				&::after {
					content: "";
					display: block;
					position: absolute;
					left: 0;
					bottom: 21px;
					width: 100%;
					height: 7px;
					z-index: -1;
					opacity: 0;
					background-color: var( --vamtam-accent-color-3);
					transition: opacity .3s;
				}

				&:is( .elementor-active, :hover ) {
					&::after {
						opacity: 1;
					}
				}
			}
		}

		&.vamtam-tabs {
			.elementor-tabs-wrapper {
				.elementor-tab-title {
					padding: 20px 25px;
					margin: 0;
					border: none;
					border-width: 0;
				}
			}

			.elementor-tab-title.elementor-active {
				background: inherit;
				border: none;
				border-width: 0;
			}

			.elementor-tab-content {
				padding: 20px;
			}

			.elementor-tab-title.elementor-tab-desktop-title {
				padding: 20px 0;
				margin: 0 10px;

				&.elementor-active {
					.elementor-widget-heading.vamtam-has-theme-widget-styles {
						.elementor-heading-title {
							&::after {
								content: "";
								display: block;
								position: absolute;
								left: 0;
								bottom: 1px;
								width: 100%;
								height: 7px;
								z-index: -1;
								opacity: 1;
								background-color: var( --vamtam-accent-color-3);
							}
						}
					}
				}
			}

			.elementor-widget-heading.vamtam-has-theme-widget-styles {
				.elementor-heading-title {
					&::after {
						background-color: var( --vamtam-accent-color-3);
						z-index: -1;
						height: 7px;
						opacity: 0;
						content: "";
						width: 100%;
						left: 0;
						bottom: 1px;
						display: block;
						position: absolute;
						transition: .3s;
					}
				}
			}

			.elementor-tab-title {
				&:is( .elementor-active, :hover ) {
					.elementor-widget-heading.vamtam-has-theme-widget-styles {
						.elementor-heading-title {
							&::after {
								background-color: var( --vamtam-accent-color-3);
								opacity: 1;
							}
						}
					}
				}
			}
		}

    }
}