/* =============================================================================
- Tour
============================================================================= */
.gwel-tab-vertical {
	display: flex;
	.gwel-tabs-wrapper {
		display: flex;
		flex-direction: column;
		justify-content: var(--gwel-tabs-alignment, flex-start);
		gap: var(--tab-items-spacing,0px);
		flex-basis: var(--gwel-tabs--title-w,20%);
	}
	.gwel-tab-title-wrapper {
		padding: 0px;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		gap: 8px;
		cursor: pointer;
	}
	.gwel-responsive-mode {
		display: none;
	}
	.gwel-tab-title {
		margin: 0;
		color: var(--gwel-tabs--title-c, #000000);
	}
	.gwel-tabs-content-wrapper {
		display: flex;
		flex-direction: column;
		flex: 1;
	}
	.gwel-tab-content {
		&:not(.gwel-active) {
			display: none;
		}
		> p:last-child {
			margin-bottom: 0;
		}
	}
	&.gwel-layout-1 {
		background-color: var(--gwel-tabs--background-c, transparent);
		.gwel-tabs-wrapper {
			overflow: hidden;
		}
		.gwel-tab-title-wrapper {
			padding: 20px;
		}
		.gwel-tab-title-wrapper.gwel-normal-mode {
			position: relative;
			border: var(--gwel-tabs--border-w,1px) solid var(--gwel-tabs--border-c, #d5d8dc);
			border-right: none;
			border-radius: var(--gwel-tabs--title-border-r,0) var(--gwel-tabs--title-border-r,0) 0 0;
			&:not(:last-child) {
				border-bottom: none;
			}
			&.gwel-active {
				background-color: var(--gwel-tabs--active-background-c, transparent);
				&:after,
				&:before {
					content: '';
					display: block;
					border-right: var(--gwel-tabs--border-w,1px) solid var(--gwel-tabs--border-c, #d5d8dc);
					position: absolute;
					right: 0;
					height: 999em;
					width: 0
				}
				&:after {
					top: 100%;
				}
				&:before {
					bottom: 100%;
				}
			}

		}
		.gwel-tab-title-wrapper.gwel-responsive-mode {
			border: var(--gwel-tabs--border-w,1px) solid var(--gwel-tabs--border-c, #d5d8dc);
		}
		.gwel-tab-item {
			&:not(:first-child) {
				.gwel-tab-title-wrapper.gwel-responsive-mode {
					border-top: none;
				}
			}
		}
		.gwel-tabs-content-wrapper {
			border: var(--gwel-tabs--border-w,1px) solid var(--gwel-tabs--border-c, #d5d8dc);
			background-color: var(--gwel-tabs--active-background-c, transparent);
			border-left: none;
		}
		.gwel-tab-content {
			padding: 30px;
		}
	}
	&.gwel-layout-2 {
		.gwel-tab-title-wrapper.gwel-normal-mode {
			padding: 20px 0;
			position: relative;
			&:after {
				content: '';
				position: absolute;
				bottom: 0;
				right: calc(-1 * var(--gwel-tabs--border-w,1px));
				width: 0;
				height: 100%;
				border-right: var(--gwel-tabs--title-line-s,1px) solid var(--gwel-tabs--title-border-c,#000000);
				z-index: 1;
				transform: scaleY(0);
				transform-origin: center bottom;
				transition: transform 0.4s cubic-bezier(0.23, 0.46, 0.4, 1);
			}
			&:hover,
			&.gwel-active {
				&:after {
					transform: scaleX(1);
					transform-origin: center top;
				}
			}
		}
		.gwel-tab-title-wrapper.gwel-responsive-mode {
			padding: 20px 0;
			position: relative;
			border-bottom: var(--gwel-tabs--border-w,1px) solid var(--gwel-tabs--border-c, #d5d8dc);
			&:after {
				content: '';
				position: absolute;
				left: 0;
				bottom: calc(-1 * var(--gwel-tabs--border-w,1px));
				width: 100%;
				height: 0;
				border-bottom: var(--gwel-tabs--title-line-s,1px) solid var(--gwel-tabs--title-border-c,#000000);
				z-index: 1;
				transform: scaleX(0);
				transform-origin: right center;
				transition: transform 0.4s cubic-bezier(0.23, 0.46, 0.4, 1);
			}
			&:hover,
			&.gwel-active {
				&:after {
					transform: scaleX(1);
					transform-origin: left center;
				}
			}
		}
		.gwel-tabs-wrapper {
			gap: var(--tab-items-spacing,20px);
		}
		.gwel-tab-content {
			padding: 30px;
		}
		.gwel-tabs-wrapper {
			border-right: var(--gwel-tabs--border-w,1px) solid var(--gwel-tabs--border-c, #d5d8dc);
		}
	}

	&.gwel-layout-3 {
		.gwel-tabs-wrapper {
			gap: var(--tab-items-spacing,20px);
		}
		.gwel-tab-content {
			padding: 30px;
		}
		.gwel-tab-title-wrapper {
			justify-content: center;
			padding: 12px 20px;
			background-color: var(--gwel-tabs--title-background-c,#f7f7f7);
			border: var(--gwel-tab--title-border-w,1px) solid var(--gwel-tabs--title-border-c,#d5d8dc);
			border-radius: var(--gwel-tabs--title-border-r,4px);
			&.gwel-active {
				background-color: var(--gwel-tabs--title-background-c,#000000);
				border: var(--gwel-tab--title-border-w,1px) solid var(--gwel-tabs--title-border-c,#000000);
				.gwel-tab-title {
					color: var(--gwel-tabs--title-c, #ffffff);
				}
			}
		}
	}

	&.gwel-layout-4 {
		.gwel-tab-title-wrapper.gwel-normal-mode {
			padding: 0;
			.gwel-tab-title {
				position: relative;
				&:after {
					content: '';
					position: absolute;
					bottom: var(--gwel-tabs--title-line-offset, 0px);
					left: 0;
					width: 100%;
					height: 0;
					border-bottom: var(--gwel-tabs--title-line-s,1px) solid var(--gwel-tabs--title-border-c,#000000);
					z-index: 1;
					transform: scaleX(0);
					transform-origin: right bottom;
					transition: transform 0.4s cubic-bezier(0.23, 0.46, 0.4, 1);
				}
			}
			&:hover,
			&.gwel-active {
				.gwel-tab-title {
					&:after {
						transform: scaleX(1);
						transform-origin: left bottom;
					}
				}
			}
		}
		.gwel-tab-title-wrapper.gwel-responsive-mode {
			padding: 20px 0;
			position: relative;
			border-bottom: var(--gwel-tabs--border-w,1px) solid var(--gwel-tabs--border-c, #d5d8dc);
			&:after {
				content: '';
				position: absolute;
				left: 0;
				bottom: calc(-1 * var(--gwel-tabs--border-w,1px));
				width: 100%;
				height: 0;
				border-bottom: var(--gwel-tabs--title-line-s,1px) solid var(--gwel-tabs--title-border-c,#000000);
				z-index: 1;
				transform: scaleX(0);
				transform-origin: right center;
				transition: transform 0.4s cubic-bezier(0.23, 0.46, 0.4, 1);
			}
			&:hover,
			&.gwel-active {
				&:after {
					transform: scaleX(1);
					transform-origin: left center;
				}
			}
		}
		.gwel-tabs-wrapper {
			gap: var(--tab-items-spacing,20px);
		}
		.gwel-tab-content {
			padding: 30px;
		}
		.gwel-tabs-wrapper {
			border-right: var(--gwel-tabs--border-w,1px) solid var(--gwel-tabs--border-c, #d5d8dc);
		}
	}

}