/* Patterns - Interaction - Floating Actions */
////
/// @group Patterns-Floating_Actions
/// Patterns - Interaction - Floating Actions

///
.floating {
	&-actions-wrapper,
	&-overlay {
		--osui-floating-actions-layer: var(--layer-global-elevated);
	}

	&-actions-wrapper {
		align-items: flex-end;
		bottom: 0;
		display: flex;
		flex-direction: column;
		margin: var(--space-l);
		position: fixed;
		right: 0;
		will-change: transform, opacity;
		z-index: var(--osui-floating-actions-layer);

		&:not(.is--open) {
			pointer-events: none;

			//Service Studio Preview
			& {
				-servicestudio-pointer-events: auto;
			}
		}

		&.is--open {
			.floating-actions-item {
				opacity: 1;
				transform: translateY(0px) translateZ(0) scale(1);
				transition: all 180ms ease-out;
				transition-delay: calc(var(--delay) * 40ms);
			}

			.floating-actions-item-button {
				transform: translateZ(0) scale(1);
			}

			.floating-button {
				box-shadow: var(--shadow-none);
				filter: brightness(0.9);
				transform: rotate(135deg) translateZ(0);
			}
		}

		&.bottom-bar-exists {
			bottom: calc(var(--bottom-bar-size) + var(--space-base));
		}

		&.no-rotation {
			.floating-button {
				transform: none;
			}
		}

		.slide-from-left-enter .layout-native &,
		.slide-from-left-leave .layout-native &,
		.slide-from-right-enter .layout-native &,
		.slide-from-right-leave .layout-native &,
		.slide-from-top-enter .layout-native &,
		.slide-from-top-leave .layout-native &,
		.slide-from-bottom-enter .layout-native &,
		.slide-from-bottom-leave .layout-native &,
		.fade-enter .layout-native &,
		.fade-leave .layout-native & {
			display: none;
		}
	}

	&-items {
		align-items: flex-end;
		display: flex;
		flex-direction: column;
		padding-bottom: var(--space-s);
		padding-right: var(--space-s);
	}

	&-actions-item {
		align-items: center;
		display: flex;
		justify-content: flex-end;
		margin-bottom: var(--space-base);
		opacity: 0;
		transform: translateY(var(--space-base)) translateZ(0);
		transition: all 100ms ease-in;

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

	&-actions-item-button {
		align-items: center;
		background-color: get-background-color('neutral-0');
		border-radius: var(--border-radius-rounded);
		box-shadow: var(--shadow-s);
		color: get-text-color('primary');
		cursor: pointer;
		display: flex;
		font-size: var(--font-size-base);
		height: 40px;
		justify-content: center;
		margin-left: var(--space-base);
		transform: translateZ(0) scale(0.3);
		transition: transform 180ms ease-out;
		transition-delay: calc(var(--delay) * 40ms);
		width: 40px;

		// Service Studio Preview
		& {
			-servicestudio-transform: scale(1);
		}

		&:hover {
			background-color: get-background-color('primary');
			color: get-text-color('neutral-0');
		}
	}

	&-button {
		align-items: center;
		background-color: get-background-color('primary');
		border-radius: var(--border-radius-rounded);
		box-shadow: var(--shadow-xl);
		color: get-text-color('neutral-0');
		cursor: pointer;
		display: flex;
		font-size: var(--font-size-h4);
		height: 56px;
		justify-content: center;
		pointer-events: auto;
		transform: rotate(0deg) translateZ(0);
		transform-origin: center center;
		transition: all 180ms linear;
		width: 56px;

		&:hover {
			filter: brightness(0.9);
		}
	}

	&-overlay {
		background-color: get-background-color('overlay');
		cursor: pointer;
		height: 100vh;
		opacity: 0;
		pointer-events: none;
		position: fixed;
		right: 0;
		top: 0;
		transition: opacity 180ms ease-out;
		width: 100vw;
		z-index: var(--osui-floating-actions-layer);

		&.is--open {
			opacity: 1;
			pointer-events: auto;
		}
	}
}

// Responsive --------------------------------------------------------------------
///
.desktop {
	.floating-overlay {
		display: none;
	}
}

///
.phone {
	.layout-native {
		.floating-actions-wrapper {
			margin: var(--space-base);
		}
	}

	&.ios {
		&.portrait {
			.layout-native {
				.floating-actions-wrapper {
					margin-bottom: var(--os-safe-area-bottom);
				}
			}
		}

		&.landscape {
			.layout-native {
				.floating-actions-wrapper {
					margin-right: calc(var(--os-safe-area-right) + var(--space-base));
				}
			}
		}
	}
}

///
.tablet {
	&.ios {
		.floating-actions-wrapper {
			&.bottom-bar-exists {
				margin-bottom: 0;
			}
		}
	}
}

// IsRTL --------------------------------------------------------------------
///
.is-rtl {
	.floating-actions-item-button {
		margin-left: var(--space-none);
		margin-right: var(--space-base);
	}

	.floating-actions-wrapper {
		left: 0;
		right: auto;
	}
}

// Accessibility --------------------------------------------------------------------
///
.has-accessible-features {
	.floating-button:focus {
		box-shadow: 0 0 0 3px get-background-color('focus-outer');
	}

	.floating-actions-wrapper {
		&.is--open {
			.floating-button:focus {
				box-shadow: 0 0 0 3px get-background-color('focus-outer');
			}
		}
	}
}