@use "@wordpress/base-styles/colors" as *;
@use "@wordpress/base-styles/mixins" as *;
@use "@wordpress/base-styles/variables" as *;

textarea.editor-post-text-editor {
	border: $border-width solid $gray-600;
	border-radius: 0;
	display: block;
	margin: 0;
	width: 100%;
	box-shadow: none;
	resize: none;
	overflow: hidden;
	font-family: $editor-html-font;
	line-height: 2.4;
	min-height: 200px;

	@media not (prefers-reduced-motion) {
		transition: border 0.1s ease-out, box-shadow 0.1s linear;
	}

	// Same padding as title.
	padding: $grid-unit-20;
	@include break-small() {
		padding: $grid-unit-30;
	}

	/* Fonts smaller than 16px causes mobile safari to zoom. */
	font-size: $mobile-text-min-font-size !important;
	@include break-small {
		font-size: $text-editor-font-size !important;
	}

	&:focus {
		border-color: var(--wp-admin-theme-color);
		box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);

		// Elevate the z-index on focus so the focus style is uncropped.
		position: relative;
	}

	&::placeholder {
		color: $dark-gray-placeholder;
	}
}