@use '../../base/mixins/breakpoints' as break;
@use '../functions' as *;

.decoration-glow {
	position: absolute;
	border-radius: 100%;
	background-color: rgb(0 0 0 / 50%);
	filter: blur(6rem);
	mix-blend-mode: hard-light; // This blends with other decorations
	z-index: -1;
	transform: translateZ(-1px); // Needed for Safari

	&::before {
		content: '';
		position: absolute;
		inset: 0;
		border-radius: inherit;
		mix-blend-mode: hard-light; // This blends with color of .decoration-glow background color
		z-index: -2;
		transform: translateZ(-2px); // Needed for Safari
	}

	&.glow {
		// Glow positions
		&-top-right {
			top: 0;
			right: -5%;
		}

		&-bottom-right {
			bottom: 0;
			right: -5%;
		}

		&-top-left {
			top: 0;
			left: -5%;
		}

		&-bottom-left {
			bottom: 0;
			left: -5%;
		}

		&-top-center {
			top: 0;
		}

		&-bottom-center {
			bottom: 0;
		}

		&-center {
			margin: auto;
			inset: 0;
		}

		&-center-left {
			top: 50%;
			left: 0;
		}

		// Glow sizes
		&-small {
			width: 10rem;
			height: 10rem;
			filter: blur(3rem);
		}

		&-medium {
			width: 25rem;
			height: 25rem;
			filter: blur(6rem);

			@include break.max-tablet {
				width: 10rem;
				height: 10rem;
				filter: blur(3rem);
			}
		}

		&-large {
			width: 35rem;
			height: 35rem;
			filter: blur(8rem);

			@include break.max-tablet {
				width: 25rem;
				height: 25rem;
				filter: blur(6rem);
			}
		}

		&-w-full {
			width: 100%;
			height: 20rem;
		}
	}
}