@import '../../mixins.less';

.citizen-typeahead-list-item {
	&-link {
		display: flex;
		gap: var( --space-sm );
		align-items: center;
		min-height: 44px;
		padding: var( --space-xs ) var( --space-md );

		&:hover,
		&[ data-mw-typeahead-selected ] {
			background-color: var( --background-color-button-quiet--hover );
		}

		&:active {
			background-color: var( --background-color-button-quiet--active );
		}
	}

	&-image {
		flex-shrink: 0;
		width: 100%;
		max-width: 60px;
		height: 60px;
		overflow: hidden;
		background-color: var( --background-color-base-fixed );
		background-position: center;
		background-size: cover;
		border-radius: var( --border-radius-medium );

		&--placeholder {
			display: grid;
			place-content: center;
			background-color: var( --color-surface-3 );

			&::before {
				width: var( --size-icon );
				height: var( --size-icon );
			}
		}
	}

	&-text {
		display: flex;
		flex-grow: 1;
		flex-direction: column;
		gap: 2px;
		overflow: hidden;
		color: var( --color-emphasized );
		white-space: nowrap;
	}

	&-title,
	&-description {
		overflow: hidden;
		text-overflow: ellipsis;
	}

	&-title {
		font-weight: var( --font-weight-semi-bold );
		.mixin-citizen-font-styles( 'body' );
	}

	&-description {
		color: var( --color-subtle );
	}

	.citizen-typeahead-group--chips & {
		&-link {
			gap: var( --space-xs );
			min-height: 36px;
			padding: var( --space-xxs ) var( --space-sm );
			border: 1px solid var( --border-color-base );
			border-radius: var( --border-radius-medium );
		}
	}
}