/* WIDGET: TABS
-------------------------------------------- */

.vlt-tabs {
	padding: 0;
	margin: 0;
	list-style-type: none;

	li + li {
		margin-top: px2rem(10px);
	}

	.vlt-tab {
		position: relative;
		padding: px2rem(35px) px2rem(50px) px2rem(35px) px2rem(40px);
		cursor: pointer;
		background-color: var(--vlt-color-white);
		border-radius: var(--vlt-border-radius);
		transition: all var(--vlt-transition-duration) var(--vlt-transition-easing);

		&::after {
			content: '';
			position: absolute;
			top: calc(50% - px2rem(10px));
			left: 100%;
			width: 0;
			height: 0;
			border-top: px2rem(10px) solid transparent;
			border-bottom: px2rem(10px) solid transparent;
			border-left: px2rem(10px) solid var(--vlt-color-white);
			transition: inherit;
		}

		&__header {
			display: flex;
			align-items: center;
		}

		&__icon {
			margin-right: px2rem(20px);
			font-size: px2rem(28px);
			line-height: 1;
			color: var(--vlt-accent-1);

			svg {
				height: 1em;
			}

		}

		&__text {
			margin-top: px2rem(20px);
			margin-bottom: 0;
			@include vlt_primary_regular_15;
		}

	}

	li.is-active .vlt-tab {
		background-color: var(--vlt-color-gray-light);

		&::after {
			border-left-color: var(--vlt-color-gray-light);
		}

	}

}

.vlt-tab-content {

	&__item {
		display: none;
	}

}