input[type=text] {
	color: var(--text);
	background-color: var(--background-dim);
	border: none;
	border-bottom: 1px dashed var(--text-dim);
	border-radius: 0px;

	font-size: 1.25rem;

	&:focus {
		outline: none;
		background-color: var(--background-dimmer);
		border-bottom: 1px solid var(--background-bright);
	}
}

textarea {
	color: var(--text);
	background-color: var(--background-dim);
	resize: vertical;
	min-height: 25vh;
	font-family: inherit;
	border: 2px solid var(--background-dimmer);

	&:focus {
		outline: none;
		border: 2px solid var(--background-bright);
	}
}

iframe#preview {
	width: var(--pwidth);
	margin-top: 1rem;
	border: none;
	background-color: var(--background-dim);
}

/* MARK: Form Specific */
.main-create {
	display: flex;
	flex-direction: column;
	row-gap: 1rem;
}

#create {
	border-color: var(--box-border-alt);
}

#create-form,
#edit-form {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.5rem;

	input[type="text"],
	textarea {
		grid-column: 1 / 3;
	}

	#submit-create {
		grid-column: 1;
	}

	#submit-draft {
		grid-column: 2;
	}

	#submit-preview {
		grid-column: 1 / 3;
	}
}

/* MARK: Media */
@media (min-width: 50rem) {
	body {
		padding-right: var(--left-pad);
	}

	main {
		min-height: 40vh;

		&.create {
			display: flex;
			flex-direction: column;
			width: 35rem;
		}

		&.edit {
			display: grid;
			grid-template-columns: 1fr 1fr;
			column-gap: 1rem;
			width: 100%;
		}
	}

	section {
		display: flex;
		flex-direction: column;

		max-width: var(--pwidth);
		width: 100%;
		height: 100%;
	}

	iframe#preview {
		max-width: var(--pwidth);
		width: 100%;
		height: 100%;
		margin-top: 0;
	}
}