/* Patterns - Navigation - Tabs */
/* Since this pattern is Deprecated, it should not appear at SASSDCS! */

.tabs {
	display: flex;
	flex-wrap: wrap;

	&.justified {
		.tabs-header {
			width: 100%;
		}

		[data-block*='TabsHeaderItem'] {
			flex: 1;

			.tabs-header-tab {
				margin-left: var(--space-none);
			}
		}
	}

	&.tabs-vertical {
		flex-direction: row;
		flex-wrap: nowrap;

		&.justified {
			.tabs-header {
				height: auto;
			}
		}

		&.tabs-header-right {
			.tabs {
				&-header {
					order: 2;

					.tabs-header-tab {
						border-left: var(--border-size-m) solid transparent;
						border-right: var(--border-size-none);
						padding: var(--space-s) var(--space-none) var(--space-s) var(--space-m);

						&.active {
							border-left: var(--border-size-m) solid var(--color-primary);
						}
					}
				}

				&-content {
					border-left: var(--border-size-none);
					border-right: var(--border-size-s) solid var(--color-neutral-5);
					margin-left: var(--space-none);
					margin-right: -1px;
				}
			}
		}

		.tabs-header {
			&,
			.ListRecords {
				flex-direction: column;
				height: 100%;
				width: auto;
				word-break: initial;
			}

			.tabs-header-tab {
				border-bottom: var(--border-size-none);
				border-right: var(--border-size-m) solid transparent;
				justify-content: flex-start;
				margin-left: var(--space-none);
				padding: var(--space-s) var(--space-m) var(--space-s) var(--space-none);
			}

			&-tab {
				&.active {
					border-right: var(--border-size-m) solid var(--color-primary);
				}
			}
		}

		.tabs-content {
			border-left: var(--border-size-s) solid var(--color-neutral-5);
			border-top: var(--border-size-none);
			margin-left: -1px;
			margin-top: var(--space-none);
			padding: var(--space-none) var(--space-m);
		}
	}
}

.tabs-header {
	&,
	.list {
		display: flex;
		overflow-x: auto;
		position: relative;
		width: 100%;
		z-index: var(--layer-local-tier-1);
	}

	&-tab {
		align-items: center;
		border-bottom: var(--border-size-m) solid transparent;
		color: var(--color-neutral-8);
		cursor: pointer;
		display: flex;
		justify-content: center;
		margin-left: var(--space-l);
		padding: var(--space-base) var(--space-xs);
		transition: border 150ms linear;
		white-space: nowrap;

		&.active {
			border-bottom: var(--border-size-m) solid var(--color-primary);
			color: var(--color-neutral-10);
			font-weight: var(--font-semi-bold);
		}
	}
}

.tabs-content {
	border-top: var(--border-size-s) solid var(--color-neutral-5);
	flex-grow: 1;
	margin-top: -1px;
	padding: var(--space-m) var(--space-none);
	position: relative;
	width: 100%;
	z-index: var(--layer-global-auto);

	&-tab {
		&:not(.open) {
			display: none;

			// Service Studio Preview
			& {
				-servicestudio-display: block !important;
			}
		}
	}
}

[data-block*='TabsHeaderItem'] {
	&:first-child .tabs-header-tab {
		margin-left: var(--space-none);
	}
}

.popup-dialog {
	.tabs {
		.tabs-content-tab {
			&:not(.open) {
				display: none;

				// Service Studio Preview
				& {
					-servicestudio-display: block !important;
				}
			}
		}
	}
}

.layout-native {
	.tabs {
		&.tabs {
			&-section-group {
				.tabs-content {
					overflow: initial;
				}
			}

			&-vertical {
				.tabs-content {
					&-tab {
						&:not(.open) {
							display: none;
						}
					}

					.tabs-content-wrapper {
						transform: translateX(0px) translateZ(0px) !important;
					}
				}
			}
		}
	}

	.tabs-content {
		overflow: hidden;
		white-space: nowrap;
		width: 100%;

		// Service Studio Preview
		& {
			-servicestudio-overflow: visible;
			-servicestudio-white-space: normal;
		}

		&-wrapper {
			transition: transform 230ms ease-in-out;
		}

		&-tab {
			display: inline-flex;
			height: 100%;
			position: relative;
			vertical-align: top;
			white-space: normal;
			width: 100%;
			overflow: hidden;

			& > * {
				left: 0;
				position: absolute;
				top: 0;
				width: 100%;

				// Service Studio Preview
				& {
					-servicestudio-position: relative;
				}
			}

			&.open > * {
				position: relative;
			}

			&:not(.open) {
				display: inline-block;
			}
		}
	}
}

// Responsive --------------------------------------------------------------------
.desktop {
	.tabs {
		&.tabs-vertical {
			.tabs-header-tab {
				&:hover {
					border-bottom: var(--border-size-none);
					border-right: var(--border-size-m) solid var(--color-neutral-6);
				}
				&.active:hover {
					border-right: var(--border-size-m) solid var(--color-primary);
				}
			}

			&.tabs-header-right {
				.tabs-header-tab {
					&:hover {
						border-left: var(--border-size-m) solid var(--color-neutral-6);
					}

					&.active:hover {
						border-left: var(--border-size-m) solid var(--color-primary);
						border-right: var(--border-size-none);
					}
				}
			}
		}
	}

	.tabs-header-tab {
		&:hover {
			border-bottom: var(--border-size-m) solid var(--color-neutral-6);
			color: var(--color-neutral-10);
		}

		&.active:hover {
			border-bottom: var(--border-size-m) solid var(--color-primary);
		}
	}
}

// IsRTL -------------------------------------------------------------------------
///
.is-rtl {
	.tabs {
		&.tabs-vertical {
			&.tabs-header-right {
				.tabs-header {
					.tabs-header-tab {
						border-left: var(--border-size-none);
						border-right: var(--border-size-m) solid transparent;
						margin: 0;
						padding: var(--space-s) var(--space-m) var(--space-s) var(--space-none);
					}
				}

				.tabs-content {
					border-left: var(--border-size-s) solid var(--color-neutral-5);
					border-right: 0;
				}
			}

			.tabs {
				&-header-tab {
					border-left: var(--border-size-m) solid transparent;
					border-right: var(--border-size-none);
					margin: 0;
					padding: var(--space-s) var(--space-none) var(--space-s) var(--space-m);

					&.active {
						border-left: var(--border-size-m) solid var(--color-primary);
						border-right: var(--border-size-none);
					}
				}

				&-content {
					border-left: 0;
					border-right: var(--border-size-s) solid var(--color-neutral-5);
				}
			}
		}

		&-header-tab {
			margin-left: 0;
			margin-right: var(--space-l);
		}
	}

	[data-block*='TabsHeaderItem'] {
		&:first-child {
			.tabs-header-tab {
				margin-right: 0;
			}
		}
	}

	&.desktop {
		.tabs {
			&.tabs-vertical {
				.tabs-header-tab {
					&:hover {
						border-left: var(--border-size-m) solid var(--color-neutral-6);
						border-right: var(--border-size-none);
					}

					&.active {
						border-left: var(--border-size-m) solid var(--color-primary);
						border-right: var(--border-size-none);
					}
				}
			}
		}
	}
}