/* Patterns - Interaction - Action Sheet */
////
/// @group Patterns-Action_Sheet
/// Patterns - Interaction - Action Sheet

///
.action-sheet {
	bottom: 0;
	left: 0;
	margin-top: 0;
	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: var(--space-base);
	pointer-events: auto;
	position: absolute;
	transform: translateY(100%);
	width: 100%;
	will-change: transform;
	z-index: var(--layer-global-off-canvas);

	// Service Studio Preview
	& {
		-servicestudio--webkit-transform: translateY(0);
		-servicestudio-transform: translateY(0);
	}

	&-container {
		height: 100%;
		left: 0;
		overflow: hidden;
		pointer-events: none;
		position: fixed;
		top: 0;
		width: 100%;
		z-index: var(--layer-global-off-canvas);

		// Service Studio Preview
		& {
			-servicestudio-margin-top: -20px;
		}

		&:after {
			background-color: var(--overlay-background);
			content: '';
			display: block;
			height: 100%;
			left: 0;
			opacity: 0;
			pointer-events: none;
			position: absolute;
			top: 0;
			transition: opacity 0.3s cubic-bezier(0, 0, 0.3, 1);
			width: 100%;
			will-change: opacity;

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

		&--visible {
			pointer-events: auto;

			&.action-sheet-container:after {
				opacity: 1;
			}

			.action-sheet {
				transform: none;
			}

			&.action-sheet-container--animatable .action-sheet {
				transition: all 330ms ease-out;
			}
		}

		&--animatable {
			.action-sheet {
				-webkit-transition: all 130ms ease-in;
				transition: all 130ms ease-in;
			}
		}
	}

	&-buttons {
		border-radius: var(--border-radius-soft);
		display: block;
		overflow: hidden;
		position: relative;
		transform: translateZ(0);
	}

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

		.btn {
			border: none;
			border-radius: 0;
			margin-top: 1px;
			width: 100%;
		}

		&:first-child .btn {
			margin-top: 0;
		}
	}

	&-cancel .btn {
		border: none;
		color: var(--color-neutral-8);
	}
}

// Responsive --------------------------------------------------------------------
///
.desktop {
	.action-sheet {
		&-buttons,
		&-cancel {
			max-width: 500px;
		}
	}
}

.desktop,
.tablet {
	.action-sheet {
		&-buttons,
		&-cancel {
			margin: var(--space-none) auto;
		}

		&-cancel {
			margin: var(--space-base) auto var(--space-none);
		}
	}
}

.tablet {
	.action-sheet {
		&-buttons,
		&-cancel {
			max-width: 600px;
		}
	}
}

// OS HighContrast Enabled -------------------------------------------------------
///
.os-high-contrast {
	.action-sheet-container--visible .action-sheet {
		background-color: var(--color-neutral-0);
		@include a11y-high-contrast-outline(true);
	}

	.action-sheet-actions {
		--osui-action-sheet-actions-layer: 0;

		position: relative;
		z-index: var(--osui-action-sheet-actions-layer);

		&:has(.btn:focus) {
			z-index: calc(var(--osui-action-sheet-actions-layer) + var(--layer-local-tier-1));
		}
	}

	.action-sheet-buttons {
		overflow: visible;
	}
}