/* base.css resets margin/padding/background on everything, so the dialog needs explicit values */
#addSoundDialog {
	margin: auto;
	padding: 0;
	width: min(420px, calc(100vw - 32px));
	max-height: calc(100vh - 32px);
	overflow: auto;
	border-radius: 20px;
	background-color: var(--secondary);
	color: var(--text);
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
}
#addSoundDialog::backdrop {
	background-color: rgba(0, 0, 0, 0.55);
}
#addSoundDialog[open] {
	animation: addSoundIn 0.16s ease-out;
}
@keyframes addSoundIn {
	from { opacity: 0; transform: translateY(8px); }
	to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
	#addSoundDialog[open] { animation: none; }
}

#addSoundForm {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 24px;
}
#addSoundForm h2 {
	font-size: 20px;
	font-weight: 600;
}

#addSoundForm .field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: 14px;
}
#addSoundForm .field > span {
	opacity: 0.8;
}

#addSoundForm input {
	font: inherit;
	color: var(--text);
	background-color: var(--tertiary-disabled);
	border-radius: 10px;
	padding: 10px 12px;
	width: 100%;
	/* Safari makes inputs uneditable with user-select: none (set in base.css) */
	user-select: text;
	-webkit-user-select: text;
}
#addSoundForm input:focus-visible {
	outline: 2px solid var(--color);
}
#addSoundForm input[type='file'] {
	padding: 6px;
	cursor: pointer;
}
#addSoundForm input[type='file']::file-selector-button {
	font: inherit;
	font-weight: 600;
	color: var(--on-color);
	background-color: var(--color);
	border-radius: 8px;
	padding: 6px 12px;
	margin-right: 10px;
	cursor: pointer;
}

#addSoundForm .error {
	font-size: 14px;
	color: #ff6b6b;
}
#addSoundForm .error:empty {
	display: none;
}

#addSoundForm .actions {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
}
#addSoundForm .actions button {
	font: inherit;
	font-weight: 600;
	padding: 10px 18px;
	border-radius: 999px;
	cursor: pointer;
	color: var(--on-color);
	background-color: var(--color);
}
#addSoundForm .actions button.secondary {
	color: var(--text);
	background-color: var(--tertiary);
}
#addSoundForm .actions button:hover:not(:disabled) {
	filter: brightness(1.1);
}
#addSoundForm .actions button:focus-visible {
	outline: 2px solid var(--text);
	outline-offset: 2px;
}
#addSoundForm .actions button:disabled {
	opacity: 0.5;
	cursor: default;
}