@use '../variables' as *;

.#{$prefix}backdrop {
	position: fixed;
	inset: 0px;
	z-index: 20;
	display: flex;

	&--opaque {
		background-color: rgba(0, 0, 0, 0.6);
	}

	&--blur {
		background-color: rgba(255, 255, 255, 0.5);
		backdrop-filter: blur(12px);
	}

	&--transparent {
		background-color: transparent;
	}

	&--scrollable {
		overflow: auto;
	}

	&--top,
	&--bottom,
	&--center {
		justify-content: center;
	}

	&--top {
		align-items: flex-start;
	}

	&--center {
		align-items: center;
	}

	&--bottom {
		align-items: flex-end;
	}

	&--left {
		justify-content: flex-start;
	}

	&--right {
		justify-content: flex-end;
	}

	&-enter {
		opacity: 0;
	}

	&-enter-active {
		opacity: 1;
		transition: opacity 100ms;
	}

	&-exit {
		opacity: 1;
	}

	&-exit-active {
		opacity: 0;
		transition: opacity 200ms;
		transition-delay: 300ms;
	}
}