style.scss

.editor-post-permalink {
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	background: $white;
	padding: $grid-size $grid-size 0;
	font-family: $default-font;
	font-size: $default-font-size;
	height: 40px;
	white-space: nowrap;
	border: $border-width solid $light-gray-800;
	background-clip: padding-box;

	// Show a thick left border to match the left border on the title field.
	border-left: 0;
	box-shadow: -$block-left-border-width 0 0 0 $dark-gray-500;

	// Use a lighter border for dark themes.
	.is-dark-theme & {
		box-shadow: -$block-left-border-width 0 0 0 $light-gray-600;
	}

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

	// Put toolbar snugly to edge on mobile.
	margin-left: -$block-padding - $border-width; // This hides the border off the edge of the screen.
	margin-right: -$block-padding - $border-width;
	@include break-mobile() {
		padding: $grid-size-small;
	}
	@include break-small() {
		margin-left: -$border-width;
		margin-right: -$border-width;
	}
	// Increase specificity to override margins set on label element.
	&.editor-post-permalink > * {
		margin-bottom: $grid-size;

		@include break-mobile() {
			margin-bottom: 0;
		}
	}
	button {
		// Prevent button shrinking in IE11 when other items have a 100% flex basis.
		// This should be safe to apply in all browsers because we don't want these
		// buttons to shrink anyway.
		flex-shrink: 0;
	}
}

.editor-post-permalink__copy {
	border-radius: 4px;
	padding: 6px;
}

.editor-post-permalink__copy.is-copied {
	opacity: 0.3;
}

.editor-post-permalink__label {
	margin: 0 10px 0 5px;
	font-weight: 600;
}

.editor-post-permalink__link {
	color: $dark-gray-200;
	text-decoration: underline;
	margin-right: 10px;
	flex-grow: 1;
	overflow: hidden;
	position: relative;
	white-space: nowrap;

	&::after {
		@include long-content-fade($size: 20%, $edge: 1px);
	}
}

.editor-post-permalink-editor {
	width: 100%;
	min-width: 20%;
	display: inline-flex;
	align-items: center;

	.editor-post-permalink__editor-container {
		flex: 0 1 100%;
		display: flex;
		overflow: hidden; // This enables serious flex shrinking.
		padding: $border-width 0; // Necessary for the overflow to not crop the focus style.

		.editor-post-permalink-editor__prefix {
			flex: 1 1 auto;

			@include break-small {
				flex: 1 0 auto;
			}
		}

		.editor-post-permalink-editor__edit {
			flex: 1 1 100%;
		}
	}

	// Higher specificity required to override core margin styles.
	.editor-post-permalink-editor__save {
		margin-left: auto;
	}
}

.editor-post-permalink-editor__prefix {
	color: $dark-gray-300;
	min-width: 20%;
	overflow: hidden;
	position: relative;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.editor-post-permalink input[type="text"].editor-post-permalink-editor__edit {
	// Input fields are created with inherent widths.
	// By supplying both a (any) width and a min-width, we allow it to scale in a flex container.
	min-width: 10%;
	width: 100%;
	margin: 0 3px;
	padding: 2px 4px;
}

.editor-post-permalink-editor__suffix {
	color: $dark-gray-300;
	margin-right: 6px;
	flex: 0 0 0%;
}