.blocks-format-toolbar {
	display: inline-flex;
}

.blocks-format-toolbar__link-modal {
	position: relative;
	box-shadow: $shadow-popover;
	border: 1px solid $light-gray-500;
	background: $white;
	display: flex;
	flex-direction: column;
	font-family: $default-font;
	font-size: $default-font-size;
	line-height: $default-line-height;
	z-index: z-index( '.blocks-format-toolbar__link-modal' );

	.edit-post-header-toolbar__block-toolbar & {
		position: absolute;
		left: 0;
		right: 0;
	}
}

.blocks-format-toolbar__link-container {
	position: absolute;
	transform: translateX( -50% );
	z-index: z-index( '.blocks-format-toolbar__link-container' );
}

.blocks-format-toolbar__link-modal-line {
	display: flex;
	flex-direction: row;
	flex-grow: 1;
	flex-shrink: 1;
	min-width: 0;
	align-items: flex-start;

	.components-button {
		flex-shrink: 0;
		width: $icon-button-size;
		height: $icon-button-size;
	}
}

.blocks-format-toolbar__link-settings-toggle .dashicon {
	transform: rotate(90deg);
}

.blocks-format-toolbar__link-value {
	margin: $item-spacing - 1px; // subtract border
	flex-grow: 1;
	flex-shrink: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	position: relative;
	white-space: nowrap;
	min-width: 150px;
	max-width: 500px;
}

.blocks-format-toolbar__link-settings {
	padding: 7px 8px;
	border-top: 1px solid $light-gray-500;
	padding-top: 8px; // add 1px for the border

	.components-base-control {
		margin: 0;
		flex-grow: 1;
		flex-shrink: 1;
	}
}
