style.scss

.edit-site-document-actions {
	display: flex;
	align-items: center;
	gap: $grid-unit;
	height: $button-size;
	padding: $grid-unit;
	justify-content: space-between;
	// Flex items will, by default, refuse to shrink below a minimum
	// intrinsic width. In order to shrink this flexbox item, and
	// subsequently truncate child text, we set an explicit min-width.
	// See https://dev.w3.org/csswg/css-flexbox/#min-size-auto
	min-width: 0;
	background: $gray-100;
	border-radius: 4px;
	width: min(100%, 450px);

	&:has(.edit-site-document-actions__title:hover) {
		background: $gray-200;
		.edit-site-document-actions__title > button {
			color: inherit;
		}
	}
}

.edit-site-document-actions__title {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	color: currentColor;
	flex-grow: 1;

	> button {
		width: 100%;
		justify-content: center;
	}
}

.edit-site-document-actions__shortcut {
	color: $gray-700;
	&:hover {
		color: $gray-700;
	}
}

.edit-site-document-actions__left {
	min-width: $button-size;
}