@use "../mixins" as *;

.content-dialog {
	position: fixed;
	box-sizing: border-box;
	animation: dialog-inner var(--control-fast-duration) var(--control-fast-out-slow-in-easing);
	max-inline-size: calc(100% - 24px);
	border-radius: var(--overlay-corner-radius);
	background-color: var(--solid-background-base);
	background-clip: padding-box;
	box-shadow: var(--dialog-shadow);
	border: 1px solid var(--surface-stroke-default);
	overflow: hidden;
	&.size- {
		&min {
			inline-size: 320px;
		}
		&standard {
			inline-size: 448px;
		}
		&max {
			inline-size: 540px;
		}
	}

	&-smoke {
		@include flex($direction: column, $align: center, $justify: center);
		position: fixed;
		inset-inline-start: 0;
		inset-block-start: 0;
		z-index: 101;
		inline-size: 100%;
		block-size: 100%;
		&.darken {
			background-color: var(--smoke-background-default);
		}
	}

	:global(.content-dialog-title) {
		display: block;
		margin-bottom: 12px;
		color: var(--text-primary);
	}

	&-body,
	&-footer {
		padding: 24px;
	}

	&-body {
		@include typography-body;
		background-color: var(--layer-background-default);
		color: var(--text-primary);
	}

	&-footer {
		display: grid;
		grid-auto-rows: 1fr;
		grid-auto-flow: column;
		grid-gap: 8px;
		border-block-start: 1px solid var(--card-stroke-default);
		white-space: nowrap;
		> :global(.button:only-child) {
			inline-size: 50%;
			justify-self: end;
		}
	}
}