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

.editor-post-url__panel-dropdown {
	width: 100%;
}

.editor-post-url__panel-dialog .editor-post-url {
	// sidebar width - popover padding - form margin
	min-width: $sidebar-width - $grid-unit-20 - $grid-unit-20;
	margin: $grid-unit-10;
}

/* rtl:begin:ignore */
.editor-post-url__link,
.editor-post-url__front-page-link {
	direction: ltr;
	word-break: break-word;
}
/* rtl:end:ignore */

.editor-post-url__front-page-link {
	// Match padding on tertiary buttons for alignment.
	padding: $grid-unit-15 * 0.5 $grid-unit-15;
	border-radius: $radius-small;
	color: var(--wp-admin-theme-color);

	&:hover {
		background: color-mix(in srgb, var(--wp-admin-theme-color) 4%, transparent);
		color: var(--wp-admin-theme-color-darker-20, #183ad6);
	}

	&:focus {
		box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
		color: var(--wp-admin-theme-color);
		outline: 3px solid #0000;
	}
}


.editor-post-url__link-slug {
	font-weight: 600;
}

// TODO: This might indicate a need to update the InputControl itself, as
// there is no way currently to control the padding when adding prefix/suffix.
.editor-post-url__input input.components-input-control__input {
	padding-inline-start: 0 !important;
}

.editor-post-url__panel-toggle,
.editor-post-parent__panel-toggle {
	word-break: break-word;
}

.editor-post-url__intro {
	margin: 0;
}

.editor-post-url__permalink {
	margin-top: $grid-unit-10;
	margin-bottom: 0;

	&-visual-label {
		display: block;
	}
}