/**
 * @section Dialog
 */

@layer kelp.core {
	/**
	 * Prevent background scrolling with a modal dialog is open
	 */
	html:has([open]:modal) {
		overflow: hidden;
	}

	/**
	 * Default dialog styles
	 */
	dialog {
		--background-color: var(--color-background);
		--border-color: var(--color-border-muted);
		--color: var(--color-text-normal);
		--gap: var(--size-2xl);
		--width: 32em;

		background-color: var(--background-color);
		border: 1px solid var(--border-color);
		color: var(--color);
		border-radius: var(--border-radius-m);
		max-height: calc(100% - var(--size-5xl));
		max-width: calc(100% - var(--size-5xl));
		padding: var(--gap);
		width: var(--width);
	}

	@media (forced-colors: active) {
		dialog {
			border-width: var(--size-5xs);
		}
	}

	dialog:modal::backdrop {
		background-color: rgba(0, 0, 0, 0.5);
	}

	/**
	 * Auto-scrolling with fixed header/footer
	 */
	dialog:has(.action-body) {
		--padding: var(--gap);
		padding: 0;
	}

	dialog:has(.action-body) .action-header {
		position: sticky;
		top: 0;
		padding-inline: var(--padding);
		padding-block-start: var(--padding);
	}

	dialog:has(.action-body) .action-footer {
		position: sticky;
		bottom: 0;
		padding-inline: var(--padding);
		padding-block-end: var(--padding);
	}

	dialog[open]:has(.action-body) {
		display: flex;
		flex-direction: column;
		gap: var(--gap);
		overflow: clip;
	}

	dialog .action-body {
		overflow: auto;
		padding-inline: var(--padding);
	}

	/**
	 * Drawer styles
	 */
	[class*="drawer"] {
		border-radius: 0;
		max-height: 100%;
		max-width: 100%;
		margin: 0;
	}

	.drawer,
	.drawer-end,
	.drawer-start {
		height: 100%;
	}

	.drawer,
	.drawer-end {
		inset-inline-end: 0;
		inset-inline-start: auto;
	}

	.drawer-start {
		inset-inline-start: 0;
		inset-inline-end: auto;
	}

	.drawer-top,
	.drawer-bottom {
		--width: 100%;
		inset-inline-end: 0;
		inset-inline-start: 0;
	}

	.drawer-top {
		inset-block-start: 0;
	}

	.drawer-bottom {
		inset-block-end: 0;
		inset-block-start: auto;
	}

	/**
	 * Dialog width modifiers
	 */

	.dialog-xs {
		--width: 22em;
	}

	.dialog-s {
		--width: 26em;
	}

	.dialog-l {
		--width: 40em;
	}

	.dialog-xl {
		--width: 52em;
	}

	.dialog-full {
		--width: 100%;
		height: 100%;
	}
}