@use "@db-ui/foundations/build/styles/colors";

$backdrop-color: #{colors.$db-adaptive-on-bg-basic-emphasis-100-default};

$backdrop-opacity-strong: 0.64;
$backdrop-opacity-weak: 0.32;

%dialog-container {
	position: fixed;
	inset: 0;
	z-index: 9995;
}

dialog {
	padding: 0;
	margin: 0;
	border: 0;
	z-index: 9996;
	color: inherit;

	&[data-variant],
	&[data-backdrop] {
		@extend %dialog-container;
	}

	&[data-variant="inside"] {
		&:not([data-backdrop="none"]) {
			&::before {
				content: "";
				position: fixed;
				inset: 0;
			}
		}
	}

	&:not([data-backdrop="none"]) {
		&::backdrop,
		&::before {
			background-color: $backdrop-color;
			opacity: $backdrop-opacity-strong;
		}

		&[data-backdrop="invisible"] {
			&::backdrop,
			&::before {
				opacity: 0;
			}
		}

		&[data-backdrop="weak"] {
			&::backdrop,
			&::before {
				opacity: $backdrop-opacity-weak;
			}
		}
	}
}