html:has(dialog[open]) {
	overflow: hidden;
}

.ConfigDialog {
	display: contents;

	dialog {
		top: 0;
		height: 100vh;
		max-height: 100vh;
		padding: 0; /* paddingは内部要素で管理 */
		margin-right: auto;
		margin-left: 0;
		color: var(--ink-5);
		background-color: var(--ink-0);
		border: none;
		box-shadow: 4px 0 16px rgba(0, 0, 0, 20%);

		&::backdrop {
			background-color: rgba(0, 0, 0, 3%);
			backdrop-filter: blur(0.5px);
		}
	}

	form {
		position: relative;
		gap: 0;

		> header {
			position: sticky;
			top: 0;
			z-index: 10;
			padding: var(--space-m);
			background-color: var(--ink-0);
		}

		.grid {
			grid-template-columns: max-content minmax(0, 30rem);
			gap: 0 var(--space-m);
			padding: 0 var(--space-m) var(--space-m) var(--space-m);

			> * {
				grid-column: 1 / -1;
				align-items: center;
				margin-top: var(--space-m);
			}

			> h2:first-of-type {
				margin-top: 0;
			}

			> div {
				display: grid;
				grid-template-columns: subgrid;

				> label {
					width: fit-content;
					color: var(--ink-4);
				}
			}
		}

		footer {
			position: sticky;
			bottom: 0;
			z-index: 10;
			padding: var(--space-m);
			background-color: var(--ink-0);
			border-top: 1px solid var(--ink-1);
		}

		h2 {
			margin: var(--space-l) 0 0 0;
			font-size: var(--font-size-l);
		}

		h2,
		hr {
			border: none;
			border-bottom: 1px solid var(--ink-1);
		}

		.description {
			grid-column: 2;
			min-width: 0;
			margin-top: var(--space-s);
			font-size: var(--font-size-2s);
			color: var(--ink-4);
			overflow-wrap: anywhere;
		}

		.value {
			font-weight: bold;
		}
	}

	.radio-flat label:has(input[name="client.tint"]) {
		display: inline-flex;
		padding-bottom: calc(var(--space-2s) * 0.75);
		border-bottom: 2px solid #0000;

		&:has(:checked) {
			border-bottom-color: var(--ink-6);
		}

		input {
			position: unset;
			display: block;
			width: var(--space-m);
			height: var(--space-m);
			aspect-ratio: 1;
			margin: 0;
			appearance: none;
			cursor: pointer;
			border-radius: var(--radius-m);
		}
	}

	.shortcut-key {
		width: fit-content;
		font-family: monospace;
	}
}