/* Patterns - Navigation - Tabs */
////
/// @group Patterns-Tabs
/// Patterns - Navigation - Tabs

///
.osui-tabs {
	--header-item-width: fit-content(30%);
	--header-item-alignment: auto;
	--tabs-indicator-size: 1px;
	display: grid;
	height: var(--tabs-height);
	overflow: hidden;

	&--is-vertical {
		&.osui-tabs--is-right {
			grid-auto-flow: dense;
			grid-template-columns: 1fr var(--header-item-width);

			& > .osui-tabs__header {
				grid-column: 2;

				.osui-tabs__header-item {
					padding: var(--space-s) 0 var(--space-s) var(--space-base);
				}

				& > .osui-tabs__header__indicator {
					left: 0;
				}
			}

			.osui-tabs__content {
				border-right: var(--border-size-s) solid var(--color-neutral-5);
				margin-right: -1px;
			}
		}

		&.osui-tabs--is-left {
			grid-auto-flow: row;
			grid-template-columns: var(--header-item-width) 1fr;

			& > .osui-tabs__header {
				.osui-tabs__header-item {
					justify-content: flex-start;
					padding: var(--space-s) var(--space-base) var(--space-s) 0;
				}

				& > .osui-tabs__header__indicator {
					right: 0;
				}
			}

			.osui-tabs__content {
				border-left: var(--border-size-s) solid var(--color-neutral-5);
				margin-left: -1px;
			}
		}

		& > .osui-tabs__header {
			align-content: start;
			grid-template-rows: repeat(var(--tabs-header-items), var(--header-item-alignment));
			overflow: hidden;

			.osui-tabs__header-item {
				flex: none;
			}

			& > .osui-tabs__header__indicator {
				height: var(--tabs-indicator-size);
				position: absolute;
				top: 0;
				transform: translateY(var(--tabs-indicator-transform)) translateX(0) translateZ(0);
				width: 2px;
			}
		}

		.osui-tabs__content {
			width: auto;

			&-item {
				padding: var(--space-none) var(--space-m);
			}
		}
	}

	&--is-horizontal {
		grid-auto-flow: column;
		grid-template-rows: auto 1fr;

		& > .osui-tabs__header {
			grid-template-columns: repeat(var(--tabs-header-items), var(--header-item-alignment));
			justify-content: start;
			overflow-y: hidden;
			overflow-x: auto;
			word-break: keep-all;

			.osui-tabs__header-item {
				justify-content: center;
				padding: var(--space-s) var(--space-base);
			}
		}

		.osui-tabs__header__indicator {
			bottom: 0;
			height: 2px;
			transform: translateX(var(--tabs-indicator-transform)) translateY(0) translateZ(0);
			width: (var(--tabs-indicator-size));
		}

		.osui-tabs__content {
			border-top: var(--border-size-s) solid var(--color-neutral-5);
			margin-top: -1px;
		}
	}

	&--is-justified {
		--header-item-alignment: 1fr;

		&.osui-tabs--is-horizontal {
			.osui-tabs__header {
				justify-content: initial;
			}
		}

		&.osui-tabs--is-vertical {
			.osui-tabs__header {
				align-content: initial;
			}
		}
	}

	&--has-auto-height {
		.osui-tabs__content-item {
			display: none;

			&.osui-tabs--is-active {
				display: block;
			}
		}
	}

	&--has-drag:not(.osui-tabs--is-vertical) {
		.osui-tabs__content {
			overflow-x: auto;
			scroll-snap-type: x mandatory;
		}
	}

	&:not(.osui-tabs--has-drag) {
		.osui-tabs__content {
			// To prevent render/position issues after repaints that affect the Tabs size
			&:not(:focus-within) {
				scroll-snap-type: x mandatory;
			}

			&-item {
				&:not(.osui-tabs--is-active) {
					opacity: 0;

					// Service Studio preview
					& {
						-servicestudio-opacity: 1;
					}
				}
			}
		}
	}

	&__header {
		display: grid;
		height: -webkit-fit-content; // this is important to fix Safari render issues on onRender changes
		min-height: 100%;
		position: relative;
		&-item {
			align-items: center;
			background-color: transparent;
			border: none;
			color: var(--color-neutral-8);
			cursor: pointer;
			display: inline-flex;
			height: 100%;
			position: relative;
			min-height: 42px;
			text-align: unset;
			width: 100%;

			&:hover {
				&:not(.osui-tabs--is-active) {
					color: var(--color-neutral-10);
				}

				&[disabled] {
					color: var(--color-neutral-6);
				}
			}

			&.osui-tabs--is-active {
				color: var(--color-neutral-10);
				text-shadow: 0 0 0.5px currentColor; /* This is used instead of font-weight, to prevent layout-shifts */
			}

			&[disabled] {
				color: var(--color-neutral-6);
				cursor: auto;
			}
		}

		&__indicator {
			background-color: var(--color-primary);
			position: absolute;
			transition: transform 200ms linear;
			transform-origin: 0 0;
			will-change: transform;
			z-index: var(--layer-local-tier-1);

			&[disabled] {
				background-color: var(--color-neutral-6);
			}
		}

		// Service Studio preview
		& {
			-servicestudio-display: grid;
			-servicestudio-grid-auto-flow: column;
			-servicestudio-gap: var(--space-s);
		}
	}

	&__content {
		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: 100%;
		overflow: hidden;
		overscroll-behavior-x: contain;
		position: relative;
		width: 100%;

		&::-webkit-scrollbar {
			display: none;
		}

		&-item {
			height: 100%;
			overflow-y: var(--tabs-content-item-overflow);
			padding: var(--space-m) var(--space-none);
			scroll-snap-align: start;
			scroll-snap-stop: always;

			// Service Studio Preview
			& {
				-servicestudio-display: block !important;
				-servicestudio-margin-bottom: var(--space-m);

				div:empty {
					-servicestudio-padding: var(--space-m);
				}

				.uieditor-if-branch-widget:has(> div:empty) {
					-servicestudio-height: 0;
				}
			}

			// This selector is used to prevent render issues on chrome, in some screen-sizes, due to overflow hidden and css snap
			.columns {
				max-width: 99.99%;
			}
		}
	}

	&__header,
	&__content {
		& > .ph > .OSBlockWidget,
		& > .ph > .list.list-group {
			display: contents;
		}
	}

	// Service Studio Preview
	& {
		.osui-tabs__header-item,
		.osui-tabs__header-item > *,
		.osui-tabs__content-item {
			-servicestudio-border: 1px dashed var(--color-neutral-5);
			-servicestudio-width: 100%;
		}
		.osui-tabs__content-item .display-contents {
			-servicestudio-display: block;
		}
	}
}

///
.is-rtl {
	.osui-tabs {
		&.osui-tabs--is-vertical {
			&.osui-tabs--is-right {
				.osui-tabs__header {
					&-item {
						justify-content: flex-start;
						padding: var(--space-xs) var(--space-base) var(--space-xs) 0;
					}

					& > .osui-tabs__header__indicator {
						left: unset;
						right: 0;
					}
				}

				.osui-tabs__content {
					border-left: var(--border-size-s) solid var(--color-neutral-5);
					margin-left: -1px;
					border-right: 0;
				}
			}

			&.osui-tabs--is-left {
				.osui-tabs__header {
					grid-column: 1;

					&-item {
						padding: var(--space-xs) 0 var(--space-xs) var(--space-base);
					}

					& > .osui-tabs__header__indicator {
						left: 0;
						right: unset;
					}
				}

				.osui-tabs__content {
					border-right: var(--border-size-s) solid var(--color-neutral-5);
					margin-right: -1px;
					border-left: 0;
				}
			}
		}

		&.osui-tabs--is-horizontal {
			.osui-tabs__header {
				& > .osui-tabs__header__indicator {
					transform-origin: right;
				}
			}
		}
	}
}

///
.has-accessible-features {
	.osui-tabs {
		&__header-item {
			&:focus {
				box-shadow: none;
			}

			&:focus-visible {
				background-color: var(--color-focus-outer);
				color: var(--color-neutral-10);
			}
		}

		&__content-item {
			&:focus-visible {
				box-shadow: 0 0 0 1px var(--color-focus-outer) inset;
			}
		}
	}
}

// OS HighContrast Enabled -------------------------------------------------------
///
.os-high-contrast {
	.osui-tabs__header__indicator {
		display: none;
	}

	.osui-tabs__content-item {
		position: relative;
	}

	.osui-tabs__header-item:focus,
	.osui-tabs__content-item :focus {
		outline: none;
	}

	.osui-tabs__header-item:focus:before,
	.osui-tabs__header-item.osui-tabs--is-active:before,
	.osui-tabs__content-item:focus:before,
	.osui-tabs__content-item.osui-tabs--is-active:before {
		@include a11y-high-contrast-outline(true, var(--border-size-m));
		bottom: 0;
		content: '';
		display: block;
		left: 0;
		pointer-events: none;
		position: absolute;
		right: 0;
		top: 0;
	}

	.osui-tabs__header-item:focus:before,
	.osui-tabs__content-item:focus:before {
		border-width: var(--border-size-l);
	}

	.osui-tabs__content-item {
		padding: var(--space-base);
	}
}

// Issue on accordion in webkit
.windows.chrome,
.windows.edge,
.osx.chrome,
.osx.edge {
	.osui-accordion,
	.section-expandable {
		.osui-tabs__header__indicator {
			perspective: 1000px; // prevent rendering issues on webkit browsers, when inside overflow elements
		}
	}
}

// Service Studio Preview Message
.osui-tabs__preview {
	display: none;
}

// Service Studio Preview
.osui-tabs {
	&__header__indicator {
		-servicestudio-display: none;
	}

	&--is-vertical {
		.osui-tabs__header {
			-servicestudio-display: flex;
			-servicestudio-flex-direction: column;

			&-item {
				-servicestudio-height: auto;
			}
		}

		.osui-tabs--is-active::after {
			-servicestudio-left: unset;
			-servicestudio-right: 0;
			-servicestudio-width: 2px;
			-servicestudio-height: 100%;
		}

		&.osui-tabs--is-right .osui-tabs--is-active::after {
			-servicestudio-left: 0;
			-servicestudio-right: unset;
		}
	}

	&--is-active::after {
		-servicestudio-content: '';
		-servicestudio-bottom: 0;
		-servicestudio-left: 0;
		-servicestudio-width: 100%;
		-servicestudio-height: 2px;
		-servicestudio-background-color: var(--color-primary);
		-servicestudio-position: absolute;
	}
}

// Hybrid Preview
html[data-uieditorversion^='1'] .osui-tabs__preview {
	&.osui-tabs__preview--is-active {
		-servicestudio-display: block;
		-servicestudio-height: auto;
		-servicestudio-min-height: 48px;
		-servicestudio-width: auto;
		-servicestudio-position: relative;
	}

	&--is-active::after {
		-servicestudio-align-items: center;
		-servicestudio-background-color: var(--color-neutral-0);
		-servicestudio-border: 1px solid var(--color-neutral-3);
		-servicestudio-content: 'TabsContentItems are currently hidden. Use the toggle to preview them inside Service Studio.';
		-servicestudio-display: flex;
		-servicestudio-justify-content: center;
		-servicestudio-font-weight: var(--font-semi-bold);
		-servicestudio-height: auto;
		-servicestudio-padding: var(--space-s);
		-servicestudio-position: absolute;
		-servicestudio-width: 100%;
	}
}