@layer library {
	.single-column-form {
		display: flex;
		flex-direction: column;
		gap: 2rem;
	}

	.double-column-form {
		display: grid;
		gap: 2rem;
		grid-template-columns: 1fr 1fr;
	}

	form {
		div.field {
			display: flex;
			flex-direction: column;
			gap: 0.25rem;


			input:not([type="checkbox"]),
			textarea,
			select {
				padding: .25rem;
				border-radius: 0.5rem;
				border: 1px solid var(--grey-300);
				outline: none;
				background-color: inherit;
				font-size: 0.75rem;
			}

			input:hover,
			input:focus,
			textarea:hover,
			textarea:focus,
			select:hover,
			select:focus {
				box-shadow: 0 0 0 0.25rem var(--brand-shadow);
				border: 1px solid var(--brand-700);
			}
		}

		div.error {
			position: relative;

			input,
			textarea,
			select {
				border: 1px solid var(--error-300);
			}

			svg {
				position: absolute;
				right: 0;
				top: 50%;
				transform: translate(-50%, -50%);
			}
		}

		.hidden {
			display: none;
		}

		/* dialogs need to be styled with open */
		/* otherwise they cannot be closed. */
		dialog[open].errors {
			border: none;
			position: absolute;
			top: 5rem;
			box-shadow: 0 0 0.25rem 0 var(--grey-shadow);
			border-radius: 0.5rem;
			display: flex;
			gap: 1rem;
			border-bottom: 1px solid var(--warning-400);

			>button {
				align-self: flex-start;
			}
		}

		div.multi-select {
			max-height: 20rem;
			overflow-y: scroll;
			border: 1px solid var(--grey-300);
			padding: 0.25rem;
			border-radius: 0.25rem;
		}
	}

	div.errors {
		display: flex;
		flex-direction: column;
		gap: 1rem;

		span {
			display: flex;
			gap: 0.5rem;
			align-items: center;
		}
	}

	input[type="checkbox"] {
		appearance: none;
		border: 2px solid var(--brand-600);
		height: 1rem;
		width: 1rem;
		border-radius: 0.25rem;
		padding: 0.25rem;
		align-self: center;
	}

	input[type="checkbox"]:checked {
		background-color: var(--brand-300);
		position: relative;
	}

	input[type="checkbox"]:checked:after {
		content: "✓";
		color: var(--brand-600);
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
}