@use 'sass:map';
@use '../../base/maps/tokens' as *;
@use '../../base/mixins/glass' as glass;
@use '../../base/functions' as *;

.modal {
	margin: auto;
	padding: var(--padding-small);
	position: fixed;
	inset: 0;
	display: none;
	width: 100%;
	height: 100%;
	overflow: hidden auto;
	outline: 0;
	isolation: isolate;
	z-index: 1000;

	.modal-dialog {
		max-width: brandui-col-spacing(6);
		margin: auto;
		padding: var(--padding-small);
		border-width: 0.1875rem;
		border-style: solid;
		border-radius: var(--radius-large);
		z-index: 1;

		@include glass.bg-glass($dense: true);
		@include glass.border-glass;

		&-content {
			display: flex;
			flex-direction: column;
			gap: var(--padding-small);
			color: var(--ui-headline);
		}

		&-header {
			display: flex;
			justify-content: space-between;
			align-items: start;
			gap: var(--padding-small);

			.close-modal-trigger {
				margin-left: auto;
				color: var(--ui-headline);
			}
		}

		&-body {
			max-height: 50vh;
			overflow-x: auto;
		}

		&-footer {
			margin-top: var(--padding-small);
		}
	}

	&.open {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	&::after {
		content: '';
		position: fixed;
		inset: 0;
		backdrop-filter: blur(1rem);
		background-color: with-opacity(var(--default), 70);
	}
}