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

.editor-text-editor {
	@include reset;
	position: relative;
	width: 100%;
	background-color: $white;
	flex-grow: 1;

	// Post title.
	.editor-post-title:not(.is-raw-text),
	.editor-post-title.is-raw-text textarea {
		max-width: none;
		line-height: $default-line-height;

		font-family: $editor-html-font;
		font-size: 2.5em;
		font-weight: normal;

		border: $border-width solid $gray-600;
		border-radius: 0;

		// Same padding as body.
		padding: $grid-unit-20;

		@include break-small() {
			padding: $grid-unit-30;
		}

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

.editor-text-editor__body {
	width: 100%;
	padding: 0 $grid-unit-15 $grid-unit-15 $grid-unit-15;
	max-width: $break-xlarge;
	margin-left: auto;
	margin-right: auto;

	@include break-large() {
		padding: 0 $grid-unit-30 $grid-unit-30 $grid-unit-30;
	}
}

// Exit code editor toolbar.
.editor-text-editor__toolbar {
	position: sticky;
	z-index: z-index(".editor-text-editor__toolbar");
	top: 0;
	left: 0;
	right: 0;
	display: flex;
	background: rgba($white, 0.8);
	padding: $grid-unit-05 $grid-unit-15;

	@include break-small() {
		padding: $grid-unit-15;
	}

	@include break-large() {
		padding: $grid-unit-15 $grid-unit-30;
	}

	h2 {
		line-height: $button-size-next-default-40px;
		margin: 0 auto 0 0;
		font-size: $default-font-size;
		color: $gray-900;
	}
}