/* =============================================================================
- Tab
============================================================================= */
.gwel-tab-horizontal {
	.gwel-tabs-wrapper {
		display: flex;
		justify-content: var(--gwel-tabs-alignment, flex-start);
		gap: var(--tab-items-spacing,0px);
	}
	.gwel-tab-title-wrapper {
		padding: 0px;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		gap: 8px;
		cursor: pointer;
		min-width: var(--gwel-tabs--title-min-w,none);
	}
	.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;
	}
	.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 transparent;
			border-bottom: none;
			&.gwel-active {
				border: var(--gwel-tabs--border-w,1px) solid var(--gwel-tabs--border-c, #d5d8dc);
				border-bottom: none;
				background-color: var(--gwel-tabs--active-background-c, transparent);
				&:after,
				&:before {
					content: '';
					display: block;
					border-bottom: var(--gwel-tabs--border-w,1px) solid var(--gwel-tabs--border-c, #d5d8dc);
					position: absolute;
					bottom: 0;
					height: 0;
					width: 999em;
				}
				&:after {
					left: 100%;
				}
				&:before {
					right: 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-top: none;
		}
		.gwel-tab-content {
			padding: 30px;
		}
	}
	&.gwel-layout-2 {
		.gwel-tab-title-wrapper {
			padding: 20px 0;
			position: relative;
			&: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-top: 20px;
		}

		.gwel-tabs-wrapper {
			border-bottom: var(--gwel-tabs--border-w,1px) solid var(--gwel-tabs--border-c, #d5d8dc);
		}

		.gwel-tab-title-wrapper.gwel-responsive-mode {
			border-bottom: 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-top: 20px;
		}
		.gwel-tab-title-wrapper {
			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);
				}
			}
		}
	}

}