style.scss

.editor-post-title__block {
	position: relative;
	padding: 5px 0;
	font-size: $editor-font-size;

	@include break-small() {
		padding: 5px $block-side-ui-clearance;
	}

	.editor-post-title__input {
		display: block;
		width: 100%;
		margin: 0;
		box-shadow: none;
		background: transparent;
		font-family: $editor-font;
		line-height: $default-line-height;
		color: $dark-gray-900;
		transition: border 0.1s ease-out, box-shadow 0.1s linear;
		@include reduce-motion("transition");
		padding: #{ $block-padding + 5px } $block-padding;
		word-break: keep-all;

		// Stack borders on mobile.
		border: $border-width solid transparent;
		border-left-width: 0;
		border-right-width: 0;
		border-radius: 0;

		// Include transparent outline for Windows High Contrast mode.
		outline: $border-width solid transparent;

		@include break-small() {
			border-width: $border-width;
			border-left-width: 0;
		}

		// Match h1 heading.
		font-size: 2.44em;
		font-weight: 600;

		// Large text needs a 3:1 contrast ratio.
		&::-webkit-input-placeholder {
			color: $dark-opacity-200;
		}

		&::-moz-placeholder {
			color: $dark-opacity-200;
		}

		&:-ms-input-placeholder {
			color: $dark-opacity-200;
		}

		&:focus {
			border: $border-width solid transparent;
			border-left-width: 0;
			outline: $border-width solid transparent;
			box-shadow: none;
		}
	}

	&:not(.is-focus-mode) {
		&.is-selected .editor-post-title__input {
			// use opacity to work in various editor styles.
			border-color: $dark-opacity-light-800;
			box-shadow: inset $block-left-border-width 0 0 0 $dark-gray-500;

			.is-dark-theme & {
				border-color: $light-opacity-light-800;
				box-shadow: inset $block-left-border-width 0 0 0 $light-gray-600;
			}

			// Switch to outset borders on larger screens.
			@include break-small() {
				box-shadow: -$block-left-border-width 0 0 0 $dark-gray-500;

				.is-dark-theme & {
					box-shadow: -$block-left-border-width 0 0 0 $light-gray-600;
				}
			}
		}
	}

	&:not(.is-focus-mode):not(.has-fixed-toolbar):not(.is-selected) {
		.editor-post-title__input:hover {
			box-shadow: -$block-left-border-width 0 0 0 $dark-opacity-light-500;

			.is-dark-theme & {
				box-shadow: -$block-left-border-width 0 0 0 $light-opacity-light-400;
			}
		}
	}

	&.is-focus-mode .editor-post-title__input {
		opacity: 0.5;
		transition: opacity 0.1s linear;
		@include reduce-motion("transition");

		&:focus {
			opacity: 1;
		}
	}
}

.editor-post-title .editor-post-permalink {
	font-size: $default-font-size;
	color: $dark-gray-900;
	height: auto;
	position: relative;
	left: $block-left-border-width;
	top: -2px;
	width: calc(100% - #{$block-left-border-width});

	@include break-mobile() {
		position: absolute;
		top: -$block-toolbar-height + $border-width + $border-width + 1px; // Shift this element upward the same height as the block toolbar, minus the border size
		right: 0;
		flex-wrap: nowrap;
		width: auto;
	}
	@include break-small() {
		left: $block-side-ui-clearance;
		right: $block-side-ui-clearance;
	}
}