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

/**
 * Link Picker Styles
 */

.link-preview-button.components-button {
	width: 100%;
	height: auto;
	padding: $grid-unit-15;
	box-shadow: inset 0 0 0 1px $gray-600;
	border-color: $gray-600;
}

.link-preview-button__image-container {
	width: $grid-unit-30;
	height: $grid-unit-30;
	flex-shrink: 0;
}

.link-preview-button__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: $radius-small;
}

// Fix truncation in flex layout
.link-preview-button__content {
	min-width: 0;
	flex: 1;
}

.link-preview-button__details {
	min-width: 0;
	flex: 1;
}

.link-preview-button__title,
.link-preview-button__hint {
	min-width: 0;
	display: block;
	width: 100%;
	text-align: left;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.link-preview-button__title {
	margin-top: $grid-unit-05;
	font-weight: 500;
	color: $gray-900;
	display: block;
}

.link-preview-button__hint {
	font-size: $helptext-font-size;
	color: $gray-700;
	font-weight: 400;
}

.link-preview-button__icon {
	color: $gray-900;
}

.link-preview-button__badges {
	margin-top: $grid-unit-10;
}