dtx-instructions-template {
	/* DROPDOWN + BUTTONS */
	.row { gap: 2px; }

	.instructions-template-container {
		dtx-select, dtx-select .trigger { border-radius: 12px 4px 4px 12px; }
		.select-actions {
			display: flex;
			gap: 2px;
			padding: 1px;
			border-radius: 4px 12px 12px 4px;
			background: var(--border);

			[icon="delete"], [icon="edit"] { transition: .2s; }

			dtx-button[icon] { border-radius: 11px; }
		}

		.templates-select:state(invalid) ~ .select-actions {
			[icon="delete"], [icon="edit"] {
				width: 0;
				margin-left: -2px;
				padding-inline: 0;
			}
		}
	}

	/* DIALOG */
	.modal.toast {
		width: 720px;
	}
	fieldset {
		all: unset;
		display: contents;
	}

	p.header { font-size: 1rem; }

	dtx-select[name="versions"] {
		min-height: 0;
		margin-left: auto;

		.trigger { padding: 8px 32px 8px 8px; }
		&::after { inset: 2px 0 auto auto; }

		label {
			display: block;
			inset: -8px auto auto 8px !important;
		}
	}

	dtx-textarea textarea { max-height: 20vh; }

	.detailed-textarea { border-radius: 12px 12px 4px 4px; }
	.detailed-textarea.drag-over { border: 1px dashed var(--accent); }

	.detailed-instructions {
		display: flex;
		flex-direction: column;
		gap: 12px;
		width: 100%;
		margin-top: -14px;
		padding: 12px 0;
		border-radius: 4px 4px 12px 12px;
		background: var(--border);

		p {
			display: block;
			font-size: 12px;
			padding: 0 12px;
		}
	}
	.params {
		position: relative;
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
		width: 100%;
		max-height: 20vh;
		padding: 0 8px;
		overflow-y: auto;
		scrollbar-color: var(--text-light) transparent;
	}
	.params li {
		display: flex;
		align-items: center;
		border-radius: 50px;
		padding: 8px 12px;
		background: var(--accent-light);
		cursor: grab;
	}
}