@use "sass:meta";
@use "pkg:iro-sass/bem";
@use "pkg:iro-sass/props";
@use "../props" as *;

@forward "dialog.vars";
@use "dialog.vars" as vars;

@use "backdrop.vars" as backdrop;
@use "divider.vars" as divider;

@mixin styles {
	@include materialize-at-root(meta.module-variables("vars"));

	@include bem.object("dialog") {
		display: none;
		box-sizing: border-box;
		inline-size: 100%;
		max-inline-size: none;
		block-size: 100%;
		min-block-size: 0;
		max-block-size: none;
		padding: props.get(vars.$pad-b) props.get(vars.$pad-i);
		margin: 0;
		background-color: transparent;
		border: 0;

		&::backdrop {
			background-color: props.get(backdrop.$bg-color);
			backdrop-filter: blur(props.get(backdrop.$blur));
		}

		&[open],
		&:popover-open {
			display: flex;
			flex-direction: column;
		}

		@include bem.elem("content") {
			pointer-events: auto;
			border-radius: props.get(vars.$rounding);
			background-color: props.get(vars.$bg-color);
		}

		@include bem.elem("header") {
			display: flex;
			align-items: center;
			padding: props.get(vars.$body--pad-i) props.get(vars.$body--pad-i) 0;
		}

		@include bem.elem("divider") {
			margin-inline: props.get(vars.$body--pad-i);

			@include bem.next-elem("body") {
				padding-block-start: calc(
					0.5 * props.get(vars.$body--pad-b) - props.get(divider.$margin-b)
				);
			}
		}

		@include bem.elem("body") {
			padding: props.get(vars.$body--pad-b) props.get(vars.$body--pad-i);

			&::before {
				display: block;
				margin-block: -100em 100em;
				content: "";
			}
		}
	}
}