/* Patterns - Adaptive - Master Detail */
////
/// @group Patterns-Master_Detail
/// Patterns - Adaptive - Master Detail

///
.split-screen-wrapper {
	background-color: var(--color-neutral-0);
	border: var(--border-size-s) solid var(--color-neutral-4);
	border-radius: var(--border-radius-soft);
	display: flex;
	overflow: hidden;
	position: relative;

	.split {
		&-left,
		&-right {
			overflow-y: auto;
			touch-action: pan-y;

			// Service Studio Preview
			& {
				-servicestudio-min-height: 80px;
				-servicestudio-position: relative;
				-servicestudio-width: 50%;
			}
		}

		&-left {
			width: var(--left-percentage);

			.list-item {
				cursor: pointer;
			}
		}

		&-right {
			border-left: var(--border-size-s) solid var(--color-neutral-4);
			padding: var(--space-xl);
			width: calc(100% - var(--left-percentage));

			.split-right-close {
				left: calc(var(--os-safe-area-left) + var(--space-m));
				position: fixed;
				top: 12px;
				z-index: var(--layer-global-screen);

				// Service Studio Preview
				& {
					-servicestudio-display: none;
				}

				a {
					color: var(--color-neutral-8);
					font-size: var(--font-size-base);
				}
			}

			.split-right-content {
				height: 100%;

				// Service Studio Preview
				& {
					-servicestudio-min-height: 80px;
				}

				.split-right--placeholder {
					height: 100%;
				}
			}
		}
	}
}

// Layout --------------------------------------------------------------------
///
.layout-native {
	.split-right-close {
		left: calc(var(--os-safe-area-left) + 24px);
	}
}

// Responsive --------------------------------------------------------------------
///
.desktop,
.tablet {
	.split-screen-wrapper {
		&.is- {
			&-screen-size {
				height: calc(100vh - var(--master-detail-height));
			}

			&-full-height {
				height: var(--master-detail-height);
			}
		}

		.split-right-close {
			display: none;
		}
	}
}

.phone {
	.split-screen-wrapper {
		// Service Studio Preview
		& {
			-servicestudio-display: block;
		}

		.split {
			&-left,
			&-right {
				// Service Studio Preview
				& {
					-servicestudio-width: 100% !important;
				}
			}

			&-left {
				width: 100%;
			}

			&-right {
				background-color: var(--color-neutral-0);
				border-left: var(--border-size-none);
				height: 100%;
				left: 0;
				padding-bottom: calc(var(--os-safe-area-bottom) + var(--space-m));
				padding-left: calc(var(--os-safe-area-left) + var(--space-m));
				padding-right: calc(var(--os-safe-area-right) + var(--space-m));
				padding-top: var(--header-size);
				position: fixed;
				top: 0;
				transform: translateX(100%) translateZ(0);
				transition: all 190ms ease-in;
				width: 100%;
				will-change: transform;
				z-index: calc(var(--layer-above) + var(--layer-global-navigation));

				&.open {
					transform: translateX(0) translateZ(0);
					transition: all 330ms ease-out;
				}

				// Service Studio Preview
				& {
					-servicestudio--webkit-transform: none;
					-servicestudio-position: static;
				}
			}
		}
	}

	.layout-native {
		.split-right {
			padding-bottom: calc(var(--os-safe-area-bottom) + var(--space-base));
			padding-left: calc(var(--os-safe-area-left) + var(--space-base));
			padding-right: calc(var(--os-safe-area-right) + var(--space-base));
			padding-top: calc(var(--header-size) + var(--os-safe-area-top));

			.split-right-close {
				display: block;
				left: calc(var(--os-safe-area-left) + var(--space-base));
			}
		}
	}

	&.android[data-status-bar-height] {
		.layout-native {
			.split-right {
				padding-top: calc(var(--header-size) + var(--status-bar-height));
			}
		}
	}

	&.ios {
		.layout-native {
			.split-right-close {
				top: calc(var(--os-safe-area-top) + 12px);
			}
		}
	}
}

.android[data-status-bar-height] {
	.layout-native {
		.split-right-close {
			left: 16px;
			top: calc(var(--status-bar-height) + 10px);
		}
	}
}

// IsRTL --------------------------------------------------------------------
///
.is-rtl {
	.split-right {
		border-left: 0;
		border-right: var(--border-size-s) solid var(--color-neutral-4);
	}
}

// Accessibility --------------------------------------------------------------------
///
.has-accessible-features {
	.split-left {
		.list-item {
			&:focus {
				box-shadow: none;

				&:before {
					border: 3px solid var(--color-focus-outer);
					bottom: 0;
					content: '';
					left: 0;
					position: absolute;
					right: 0;
					top: 0;
				}
			}
		}
	}
}