src/static/scripts/components/photon/fab/_fab.scss
@use "../../../../style/vars";
@use "../../../../style/shadow";

.floatingActionButton {
	position: fixed;
	z-index: 4;
	bottom: 0;
	left: 0;
	margin: 1.5rem;
	--last-layer-distance: 0.5rem;

	.rootElement {
		position: absolute;
		z-index: 5;
		bottom: 0;
		left: 0;
		width: 3.5rem;
		height: 3.5rem;
		border-radius: 50%;
		background-color: vars.$background-el1;
		transition: all .25s ease;
		@extend %shadow-shorter;
		--shadow-color: transparent;

		img {
			transition: all .25s ease;

			&.bg {
				filter: vars.$fab-root-filter;
				width: 100%;
				height: 100%;
			}

			&.edit {
				position: absolute;
				bottom: 0;
				left: 0;
				margin: 0.75rem;
				width: 2rem;
				height: 2rem;
				opacity: 0;
				visibility: hidden;

				&.end {
					margin: 0.5rem;
					width: 2.5rem;
					height: 2.5rem;
				}
			}
		}
	}

	&::after {
		content: "";
		position: fixed;
		z-index: -1;
		bottom: 0;
		left: 0;
		width: calc(6.5rem);
		height: calc(6.5rem);
		border-top-right-radius: 100%;
	}

	&.show:not(.remove) {
		.rootElement {
			--shadow-color: #{vars.$fab-root-shadow};

			img.bg {
				filter: vars.$fab-root-filter-active;
			}

			img.edit {
				&.start {
					opacity: 1;
					visibility: visible;
				}
			}
		}

		&::after {
			width: calc(var(--last-layer-distance) + 6rem);
			height: calc(var(--last-layer-distance) + 6rem);
		}
	}

	&.editing:not(.remove) {
		.rootElement {
			img.edit {
				&.start {
					opacity: 0;
				}

				&.end {
					opacity: 1;
					visibility: visible;
				}
			}
		}
	}

	&.remove {
		opacity: 0;
		visibility: hidden;
	}
}