.kt-tab-title {
	position: relative;
	transition: color 0.3s ease;
	--underline-origin: right;
}

.kt-tab-title::after {
	content: "";
	position: absolute;
	background-color: currentColor;
	transition: transform 0.3s ease;
	transform: scaleX(0);
	transform-origin: var(--underline-origin);
	pointer-events: none;
}

.wp-block-kadence-tabs:not(.kt-tabs-layout-vtabs) .kt-tab-title::after {
	bottom: -6px;
	left: 0;
	width: 100%;
	height: 6px;
}

/* vtabs underline: change only what's necessary */
.wp-block-kadence-tabs > .kt-tabs-layout-vtabs .kt-tab-title::after {
	top: 0;
	bottom: 0;
	left: -6px;
	width: 6px;
	height: 100%;

	/* vtabs uses Y scaling */
	transform: scaleY(0);

	/* IMPORTANT: for vtabs, use top/bottom origin to feel like it slides */
	transform-origin: top;

	/* keep your transition */
	transition: transform 0.3s ease;
}

.kt-tab-title[aria-selected="true"]::after {
	transform: scaleX(1);
}

.wp-block-kadence-tabs > .kt-tabs-layout-vtabs .kt-tab-title[aria-selected="true"]::after {
	transform: scaleY(1);
}

/* When a tab becomes inactive, flip origin so it collapses in the opposite direction */
.kt-tab-title.was-active::after {
	transform: scaleX(0);
}

/* IMPORTANT: this is what makes the vtabs bar "slide up" as it disappears */
.wp-block-kadence-tabs > .kt-tabs-layout-vtabs .kt-tab-title.was-active::after {
	transform-origin: bottom;
	transform: scaleY(0);
}

.wp-block-kadence-tabs > .kt-tabs-layout-vtabs {
	display: flex;
}

.wp-block-kadence-tabs > .kt-tabs-layout-vtabs .kt-tabs-inner-wrap {
	display: flex;
	flex-direction: row;
	flex: 1;
	min-height: 100%;
	width: 100%;
}

.wp-block-kadence-tabs > .kt-tabs-layout-vtabs .kt-tab-title {
	justify-content: start !important;
	text-align: left !important;
}

.wp-block-kadence-tabs > .kt-tabs-layout-vtabs .kt-tabs-title-list {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	flex: 0 0 auto;
	height: 100%;
}

.wp-block-kadence-tabs > .kt-tabs-layout-vtabs {
	display: flex;
}

.wp-block-kadence-tabs > .kt-tabs-layout-vtabs .kt-tabs-inner-wrap {
	display: flex;
	flex-direction: row;
	flex: 1;
	min-height: 100%;
	width: 100%;
}

.wp-block-kadence-tabs > .kt-tabs-layout-vtabs .kt-tabs-title-list {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	flex: 0 0 auto;
	height: 100%;
}

.wp-block-kadence-tabs > .kt-tabs-layout-vtabs .kt-tab-inner-content {
	padding: 0 !important;
}

.tabs-inverse .kt-tab-title::after {
	background-color: var(--wp--preset--color--accent);
}

@media (max-width: 767px) {
    .wp-block-kadence-tabs > .kt-tabs-layout-vtabs .kt-tabs-title-list {
        width: auto !important;
		max-width: 40%;
    }
}

@media (min-width: 1025px) {
    .wp-block-kadence-tabs > .kt-tabs-layout-vtabs .kt-tabs-title-list {
        width: 20% !important;
    }
}