src/static/scripts/components/photon/fab/fabElement/_fabElement.scss
@use "../../../../../style/vars";
@use "../fab";
@use 'sass:math';

@keyframes popInFabElement {
	from {
		filter: opacity(0) blur(5px);
	}

	to {
		filter: opacity(1) blur(0);
	}
}

.fabElement {
	--img: "";
	--x: 0;
	--y: 0;

	position: absolute;
	bottom: 0;
	left: 0;
	width: 3rem;
	height: 3rem;
	display: flex;
	transition: all .25s ease;

	> .iconWrapper {
		margin-left: auto;
		background-color: vars.$background-el1;
		width: 3rem;
		height: 3rem;
		border-radius: 50%;
		border: 1px solid vars.$border-color;
		will-change: transform;
		opacity: 0;
		transition: all .25s ease, padding .1s ease, border .1s ease;
		animation: popInFabElement 0.2s ease forwards;
		cursor: pointer;;
		@extend %shadow-diffuse;

		> .icon {
			width: 100%;
			height: 100%;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;

			&::after {
				content: "";
				width: 2rem;
				height: 2rem;
				transition: all .15s ease;
				border-radius: 25%;
				display: block;
				background-size: cover;
				background-origin: content-box;
				background-repeat: no-repeat;
				background-image: var(--img);
			}

			&:active::after {
				width: 2.2rem;
				height: 2.2rem;
			}
		}

		&:hover {
			background-color: vars.$background-el2;
		}
	}

	&.small {
		width: 2rem;
		height: 2rem;

		> .iconWrapper {
			width: 2rem;
			height: 2rem;

			> .icon {
				width: 100%;
				height: 100%;
				transform: scale(1.05);

				&::after {
					width: 1.5rem;
					height: 1.5rem;
				}

				&:active::after {
					width: 1.7rem;
					height: 1.7rem;
				}
			}
		}
	}

	&.editPaneOpen {
		.subFab {
			transition-delay: 0.4s;
		}
	}

	.subFab {
		background: vars.$background-el2;
		border: 1px solid vars.$border-color;
		width: 2rem;
		height: 2rem;
		position: absolute;
		z-index: 1;
		border-radius: 50%;
		transition: all .25s ease;
		transition-delay: 0.1s;
		opacity: 0;
		visibility: hidden;
		margin: 0.5rem;
		transform: scale(0.25);
		@extend %shadow-diffuse;

		img {
			width: 2rem;
			height: 2rem;
			padding: .25rem;
			margin: -1px 0 0 -1px;

			&:active {
				padding: .15rem;
			}
		}
	}
}

.floatingActionButton {
	&.show:not(.remove) {
		.fabElement {
			margin-left: calc(0.25rem + var(--x));
			margin-bottom: calc(0.25rem + var(--y));

			> .iconWrapper {
				opacity: 1;
			}
		}
	}

	&:not(.editing) {
		.fabElement.editingOnlyVisible {
			margin-left: 1rem;
			margin-bottom: 1rem;
		}
	}

	&.editing {
		.fabElement.normal::before {
			content: "";
			position: absolute;
			z-index: 1;
			width: 100%;
			height: 100%;
			border-radius: 50%;
		}
	}

	&.editing:not(.isDragging) .fabElement:hover, &.editing.isDragging .fabElement.draggable {
		$subFabDistance: 2.75rem;

		.subFab {
			opacity: 1;
			visibility: visible;
			transition-delay: 0s;

			&:nth-of-type(1) {
				$angle: 150 * math.div(math.$pi, 180);
				transform: translateX(math.cos($angle) * $subFabDistance) translateY(math.sin($angle) * $subFabDistance) scale(1);
			}

			&:nth-of-type(2) {
				$angle: 270 * math.div(math.$pi, 180);
				transform: translateX(math.cos($angle) * $subFabDistance) translateY(math.sin($angle) * $subFabDistance) scale(1);
			}

			&:nth-of-type(3) {
				$angle: 30 * math.div(math.$pi, 180);
				transform: translateX(math.cos($angle) * $subFabDistance) translateY(math.sin($angle) * $subFabDistance) scale(1);
			}
		}
	}

	&.isDragging {
		.fabElement {
			transition: all .25s ease, margin 0s;

			&:not(.draggable, .small) {
				> .iconWrapper {
					border-width: 2px;
				}
			}

			&.draggable {
				z-index: 3;
				pointer-events: none;

				> .iconWrapper {
					@extend %shadow-4;
				}
			}

			&.dragTarget {
				> .iconWrapper {
					border-width: 5px;
					filter: brightness(3);
					@extend %shadow-6;
				}
			}
		}
	}
}