/* Patterns - Content - Floating Content */
////
/// @group Patterns-Floating_Content
/// Patterns - Content - Floating Content

///
.floating-content {
	position: fixed;
	width: auto;
	z-index: var(--layer-global-elevated);

	&.floating-content-full {
		&-width {
			left: 0;
			right: 0;
			width: auto;

			& > .OSInline {
				display: inline;
			}
		}

		&-height {
			margin-top: 0;
			top: calc(var(--header-size) + var(--space-base) * 2);

			&.absolute-top {
				top: var(--os-safe-area-top);
			}
		}
	}

	&.absolute {
		&-bottom {
			bottom: var(--os-safe-area-bottom);
		}

		&-top-plus-header {
			top: calc(var(--header-size) + var(--os-safe-area-top));
		}
	}

	& > div:empty {
		// Service Studio preview
		& {
			-servicestudio-min-height: 80px;
			-servicestudio-min-width: 80px;
		}
	}

	&-top {
		left: 50%;
		margin-top: 0;
		top: calc(var(--header-size) + var(--space-base) * 2);
		transform: translateX(-50%);

		&-left {
			left: 0;
			margin-top: 0;
			top: calc(var(--header-size) + var(--space-base) * 2);
		}

		&-right {
			margin-top: 0;
			right: 0;
			top: calc(var(--header-size) + var(--space-base) * 2);
		}
	}

	&-left {
		left: 0;
		top: 50%;
		transform: translateY(-50%);
	}

	&-right {
		right: 0;
		top: 50%;
		transform: translateY(-50%);
	}

	&-center {
		left: 50%;
		top: 50%;
		transform: translateX(-50%) translateY(-50%);

		&.floating-content {
			&-full {
				&-width {
					transform: translateX(0) translateY(-50%);
				}

				&-height {
					bottom: 0;
					transform: translateY(0) translateX(-50%);
				}
			}

			&-center {
				&.floating-content-full-width.floating-content-full-height {
					transform: translateX(0) translateY(0);
				}
			}
		}
	}

	&-bottom {
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);

		&-left {
			bottom: 0;
			left: 0;
		}

		&-right {
			bottom: 0;
			right: 0;
		}
	}

	&-top,
	&-bottom {
		&,
		&-left,
		&-right {
			&.floating-content-full-height {
				bottom: 0;
			}
		}

		&.floating-content-full-width {
			transform: translateX(0);
		}
	}

	&-top,
	&-bottom,
	&-center {
		&.floating-content-full-width {
			transform: translateX(0);
		}
	}

	&-left,
	&-right {
		&.floating-content-full-height {
			bottom: 0;
			transform: translateY(0);
		}
	}

	&-margin {
		margin: var(--space-l);

		&.floating-content {
			&-center {
				left: calc(50% - var(--space-l));
				top: calc(50% - var(--space-l));
			}

			&-left,
			&-right {
				top: calc(50% - var(--space-l));
			}
			&-top,
			&-bottom,
			&-center {
				left: calc(50% - var(--space-l));
			}
		}
	}
}

///
.absolute-bottom.absolute-center.floating-content-bottom {
	top: inherit;
}

///
.layout {
	.blank {
		.floating-content {
			&-top,
			&-top-right,
			&-top-left,
			&.floating-content-full-height {
				top: 0;
			}

			&.floating-content-full-height.floating-content-margin {
				margin: var(--space-l);
			}
		}
	}

	&:not(.menu-visible),
	&.aside-expandable {
		.floating-content[class*='absolute-']:not(.absolute-top-plus-header) {
			z-index: calc(var(--layer-global-navigation) + var(--layer-local-tier-1));
		}
	}
}

///
.aside {
	&-visible,
	&-expandable {
		&.menu-visible {
			.floating-content {
				&-top:not(.absolute-top),
				&-center:not(.absolute-center),
				&-bottom:not(.absolute-bottom) {
					left: calc(50% + ((var(--side-menu-size) / 2)));
				}

				&.floating-content-full-width,
				&-left:not(.absolute-left),
				&-bottom-left:not(.absolute-left),
				&-top-left:not(.absolute-left) {
					left: var(--side-menu-size);
				}
			}
		}
	}
}

// Responsive --------------------------------------------------------------------
///
.desktop {
	.layout.layout-side:not(.layout-native) {
		.floating-content {
			&-top-left,
			&-left,
			&-bottom-left {
				&:not(.absolute-left) {
					left: var(--side-menu-size);
				}
			}
		}
	}

	.layout-native {
		.aside-visible {
			.floating-content.floating-content-full-width {
				left: var(--side-menu-size);
			}
		}
	}
}

///
.landscape {
	.layout-native {
		&.aside-visible {
			.floating-content.floating-content-full-width {
				.aside-visible.menu-visible {
					.floating-content.floating-content-full-width {
						left: var(--side-menu-size);
					}
				}
			}
		}
	}
}

///
.tablet,
.phone {
	.layout-native {
		.floating-content {
			&.floating-content-full {
				&-height.absolute-top {
					top: var(--os-safe-area-top);
				}

				&-width {
					left: 0;
					right: 0;
				}
			}

			&.absolute-bottom {
				bottom: var(--os-safe-area-bottom);
			}

			&-bottom {
				&,
				&-left,
				&-right {
					bottom: calc(var(--bottom-bar-size) + var(--os-safe-area-bottom));
				}
			}
		}
	}
}

///
.phone {
	.floating-content {
		&-top-left,
		&-left {
			left: var(--os-safe-area-left);
		}

		&-top-right,
		&-right {
			right: var(--os-safe-area-right);
		}

		&-bottom {
			bottom: var(--os-safe-area-bottom);

			&-left {
				bottom: var(--os-safe-area-bottom);
				left: var(--os-safe-area-left);
			}

			&-right {
				bottom: var(--os-safe-area-bottom);
				right: var(--os-safe-area-right);
			}
		}
	}
}

// OS HighContrast Enabled -------------------------------------------------------
///
.os-high-contrast {
	.floating {
		&-button {
			border: var(--border-size-m) solid var(--color-neutral-7);
		}
	}
}