src/static/scripts/components/photon/fab/fabElementEditPane/_fabElementEditPane.scss
@use "../../../../../style/vars";
@use "../../../../../style/shadow";
@use "sass:math";

.fabElementEditPane {
	position: absolute;
	bottom: 0;
	z-index: 3;
	margin-bottom: 5.5rem;
	margin-left: -2.2rem;
	background: vars.$background-el1;
	border: 1px solid vars.$border-color;
	border-radius: vars.$border-radius;
	width: 17.5rem;
	height: 15.5rem;
	opacity: 0;
	visibility: hidden;
	transform: scale(0.95);
	transform-origin: bottom center;
	transition: all .25s ease;
	pointer-events: none;
	@extend %shadow-diffuse;

	&.show {
		opacity: 1;
		visibility: visible;
		transform: scale(1);
		pointer-events: all;
	}

	.header {
		width: 100%;
		height: 2rem;
		border-bottom: 1px solid vars.$border-color;
		background: vars.$switcher-bg;
		display: flex;
		justify-content: space-around;
		border-top-right-radius: vars.$border-radius;
		border-top-left-radius: vars.$border-radius;

		> button {
			line-height: 2rem;
			text-align: center;
			flex-grow: 1;

			&:first-child {
				border-top-left-radius: vars.$border-radius;
			}

			&:last-child {
				border-top-right-radius: vars.$border-radius;
			}

			&:hover {
				background: vars.$switcher-bg-hover;
			}

			&:active {
				background: vars.$switcher-bg-active;
			}

			&.selected {
				background: vars.$switcher-bg-selected;
			}
		}
	}

	.section {
		padding: .5rem;
		width: 100%;
		display: none;
		flex-direction: column;
		gap: .25rem;

		&.selected {
			display: flex;
		}

		.inputWrapper {
			height: 1.75rem;
			border-radius: math.div(1.75rem, 2);
			display: flex;
			align-items: center;
			background: vars.$background-el2;
			border: 1px solid vars.$border-color;
			padding: 0 .5rem;
			position: relative;

			> button {
				opacity: 0.5;
				transition: opacity .25s ease;
				margin-right: .25rem;
				width: 1rem;
				height: 1rem;
				line-height: 1rem;

				&.selected {
					opacity: 1;
					color: vars.$primary;
				}
			}

			input {
				flex-grow: 1;

				&::placeholder {
					font-size: 0.8rem;
				}
			}
		}

		.results {
			overflow-x: hidden;
			overflow-y: auto;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-evenly;

			&.presets {
				max-height: 10.05rem;
			}

			&:where(.actions, .icons) {
				max-height: 8.0rem;
			}

			&.actions {
				display: flex;
				flex-direction: column;
				align-items: flex-start;
				justify-content: flex-start;
				gap: .25rem;
				flex-wrap: nowrap;
			}

			.result {
				border-radius: .5rem;
				transition: background-color .25s ease;

				&.preset {
					width: 3.5rem;
					height: 3.5rem;
				}

				&.icon {
					width: 2.75rem;
					height: 2.75rem;
					justify-content: center;
				}

				&.action {
					padding: 0.125rem .25rem;
				}

				&:hover {
					background: vars.$transparent-btn-hover;
				}

				&:is(:active, .selected) {
					background: vars.$transparent-btn-active;
				}

				&:where(.preset, .icon) {
					display: flex;
					align-items: center;
					flex-direction: column;
					margin-bottom: 0.25rem;
					padding: .25rem;

					img {
						width: 2rem;
						height: 2rem;

						&[src=""] {
							visibility: hidden;
						}
					}

					div {
						height: 1rem;
						width: 100%;
						text-align: center;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
						font-size: .75rem;

						&.small {
							font-size: .6rem;
						}
					}
				}
			}
		}
	}
}
