@use 'sass:meta';
@use 'iro-sass/src/bem';
@use 'iro-sass/src/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(.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:       '';
			}
		}
	}
}