@use "../mixins" as *;

.content-dialog {
	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;
		}
	}

	&-container {
		@include flex($direction: row, $align: start, $justify: center);
		#close-button {
			@include flex($direction: column, $align: center, $justify: center);
			color: var(--text-primary);
			top: 0;
			margin-inline-start: 8px;
			block-size: 48px;
			inline-size: 48px;
			padding: 0;
			border-radius: var(--overlay-corner-radius);
			border: 1px solid var(--surface-stroke-default);
			background-clip: padding-box;
			background-color: var(--control-on-image-fill-default);
			transition: background-color var(--control-fast-duration)
					var(--control-fast-out-slow-in-easing),
				color var(--control-fast-duration) var(--control-fast-out-slow-in-easing);
			&:hover {
				background-color: var(--control-on-image-fill-secondary);
			}
			&:active {
				background-color: var(--control-on-image-fill-tertiary);
			}
			&.disabled {
				pointer-events: none;
				color: var(--text-disabled);
				background-color: var(--control-on-image-fill-default) !important;
			}
		}
	}

	&-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;
		}
	}
}