_scene-controls.scss

#controls {
	@include layout {
		display: flex;
		flex: 1 1 auto;
		gap: $global-space-base;
		height: 0;
		max-width: 100%;
		overflow: hidden;
		padding: 0;
		padding-block-start: $global-space-sm;
		padding-inline-start: $global-space-sm;
		position: relative;
	}

	@include layout-subtle {
		opacity: $global-subtle-opacity;

		&::before {
			content: "";
			bottom: calc(-1 * #{$global-space-sm});
			left: calc(-1 * #{$global-space-sm});
			right: calc(-1 * #{$global-space-sm});
			top: calc(-1 * #{$global-space-sm});
			pointer-events: all;
			position: absolute;
		}

		&:hover,
		&:active {
			opacity: 1;

			.control-tools {
				opacity: 1;
			}
		}
	}

	.control-tools {
		@include layout {
			@extend %reset-list;
			flex-direction: column;
			flex-wrap: wrap;
			gap: $global-space-base;
			opacity: 1;
			overflow: visible;
			padding: 0;
			pointer-events: none;
			position: relative;
			transition: t(opacity left, "link");
			width: auto;
		}

		@include layout-subtle {
			opacity: $global-subtle-opacity;
		}

		&.main-controls {
			@include layout {
				display: flex;
			}
		}

		.scene-control,
		.control-tool {
			border: none;
			border-radius: $global-border-radius-controls;
			box-shadow: none;
			color: color("text-lightest");
			font-size: $global-font-size-lg;
			transition: t(background box-shadow color opacity, "link");

			@include layout {
				@include size($global-space-button-lg);
				align-items: center;
				cursor: pointer;
				display: flex;
				justify-content: center;
				line-height: initial;
				margin: 0;
				padding: 0;
				pointer-events: all;
				position: relative;

				> i {
					margin: 0;
					position: relative;
				}
			}

			@include layout(compact) {
				@include size($global-space-button-lg);
			}

			&:hover {
				@extend %global-hover;
				background-image: none;
			}

			&:focus {
				@extend %global-focus;
				background-image: none;
			}

			&.active {
				@extend %global-active;
				@extend %global-hover;
				background-image: none;
			}
		}

		.scene-control {
			background-color: color("background-darkest", $global-background-opacity-scene-control);
			background-image: $global-image-background-controls;

			&.active .control-tools {
				opacity: 1;

				@include layout {
					display: inline-flex;
				}

				@include layout-subtle {
					opacity: 0;
				}
			}

			@include layout-control-align-top {
				position: initial;
			}
		}

		.control-tool {
			background-color: color("background", $global-background-opacity-scene-control);
			background-image: $global-image-background-controls;

			&.toggle {
				background-color: color("background-lightest");
				background-image: $global-image-background-controls;
				border: none;
				color: color("text");

				&:hover {
					@extend %global-hover;
					background-color: color("primary");
					background-image: none;
					color: color("text-lightest");
				}

				&:focus {
					@extend %global-focus;
				}

				&.active {
					@extend %global-active;
					@extend %global-focus;
					background-color: color("primary");
					background-image: none;
				}
			}
		}
	}
}