@layer form {
	input[type="search"],
	input[type="text"],
	input[type="url"] {
		--local-color-base: var(--color-base);
		--local-color-base-muted: var(--color-base-muted);
		font-family: var(--font-family-base);
		padding: .75rem 0.5rem;
		width: 100%;
		font-size: 1.25rem;
		border: 0;
		box-shadow: 0 2px 0 0px var(--local-color-base);
		background: transparent;
		color: var(--local-color-base);

		&:focus,
		&:active {
			box-shadow: 0 2px 0 0px var(--local-color-base),  0 0 0 2px var(--local-color-base);
			outline: none;
		}

		&::placeholder {
			color: var(--local-color-base-muted);
		}
	}

	button, .button {
		--local-color-background: var(--color-contrast-bg);
		--local-color-foreground: var(--color-contrast-fg);
		padding: calc(0.75rem - 2px) .75rem;
		font-size: 1.25rem;
		font-family: var(--font-family-head);
		background: var(--local-color-background);
		color: var(--color-contrast-fg);
		border: 2px solid var(--local-color-background);
		box-shadow: 0 0 0 4px var(--local-color-foreground);
		text-decoration: none;

		&:hover,
		&:focus,
		&:active {
			border: 2px solid var(--color-contrast-fg);
		}
	}

	.button--secondary {
		box-shadow: none;
		background: var(--color-background);
		color: var(--color-base);
		border: 2px solid var(--color-base);

		&:hover,
		&:focus,
		&:active {
			box-shadow: 0 0 0 4px var(--color-contrast-bg);
		}
	}

	.button--hint {
		--local-color-base: var(--color-base);
		font-size: 1em;
		box-shadow: none;
		border: none;
		background: transparent;
		color: var(--local-color-base);
		padding: 0 .5rem;
		cursor: pointer;

		&:hover,
		&:focus,
		&:active {
			text-decoration: underline;
			padding: 0 .5rem;
			border: none;
		}
	}

	#instance-form {
		display: grid;
		max-width: 350px;
		grid-template-areas:
			"input input button"
			"label hint .";
		grid-template-columns: auto min-content min-content;
		gap: 0.25rem;
		& label {
			grid-area: label;
			font-size: 0.8rem;
			padding-left: 0.35rem;
		}

		& input {
			grid-area: input;
			width: 100%;
			font-size: 1rem;
		}
		& button[type="submit"] {
			grid-area: button;
			padding: calc(0.55rem - 4px) .55rem;
			font-size: 1rem;
		}

		& button[popovertarget] {
			grid-area: hint;
			position: relative;
			top: -1.6lh;
		}
	}

	form.form-main {
		background: transparent;
		display: flex;
		transition: 125ms ease-in-out;
		justify-content: start;
		align-items: start;
		height: min-content;
		justify-content: center;
		background: var(--color-background-focus);
		padding: 0;
		& > div {
			display: flex;
			height: min-content;
			width: 100%;
		}

		& button {
			--local-color-foreground: var(--color-contrast-bg);
		}
	}

	.pagination {
		& .button {
			font-size: 1rem;
			font-family: var(--font-family-base);
		}
	}
}