@use "~admin-stylesheets/colors";

.nab-post-option-in-post-searcher {
	$image-size: 52px;
	$padding: 12px;

	cursor: default;
	min-height: #{$image-size};
	padding: $padding;

	&__image {
		background: colors.$nab-background-default-image;
		float: left;
		font-size: $image-size;
		height: 1em;
		overflow: hidden;
		position: relative;
		width: 1em;
	}

	&__actual-image {
		background-size: cover;
		bottom: 0;
		height: 1em;
		left: 0;
		position: absolute;
		right: 0;
		top: 0;
		width: 1em;
	}

	&__title {
		margin-left: #{$image-size + $padding};
	}

	&__details {
		margin-left: #{$image-size + $padding};
		font-size: 0.9em;
		opacity: 0.7;
	}

	&--is-selected {
		background: colors.$nab-background-light-grey;
	}

	&:hover,
	&--is-focused {
		color: colors.$nab-text-inverted;
		background: colors.$wp-components-color-accent;
	}
}