@use '@talend/bootstrap-theme/src/theme/guidelines' as *;
@use '@talend/design-tokens/lib/tokens' as tokens;

.resource-item {
	padding-left: $padding-normal;
	padding-right: $padding-normal;
	cursor: pointer;
	display: flex;

	&.center {
		align-items: center;
	}

	.icon {
		margin-right: $padding-small;
	}

	> * {
		max-width: 100%;
		overflow: hidden;
	}

	.data-container {
		flex: 1;
		min-width: 0;

		> .title,
		> .author,
		> .subtitle {
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			font-size: 14px;
			display: block;
			color: tokens.$coral-color-neutral-text;
			margin: 0;
		}

		> .title {
			font-weight: 600;
		}
	}

	.flags-container {
		margin-right: $padding-normal;
		opacity: 0;

		.flag {
			opacity: 0;
			margin-left: $padding-small;

			&.visible {
				opacity: 1;
			}

			&[name='talend-star'] {
				color: tokens.$coral-color-warning-text;
			}

			&[name='talend-badge'] {
				color: tokens.$coral-color-accent-text;
			}
		}
	}

	&:hover,
	&:focus,
	&:global(.selected),
	&:active {
		:global(.tc-svg-icon) {
			color: tokens.$coral-color-accent-text;
		}

		.flags-container {
			opacity: 1;
		}
	}

	&:hover {
		background-color: tokens.$coral-color-neutral-background-medium;

		.data-container {
			> .title,
			> .author,
			> .subtitle {
				color: tokens.$coral-color-accent-text;
			}
		}
	}

	&:global(.selected) {
		background: tokens.$coral-color-accent-background;

		.data-container {
			> .title,
			> .author,
			> .subtitle {
				color: tokens.$coral-color-neutral-text;
			}
		}
	}

	:global {
		h3 {
			margin-top: $padding-small;
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;
		}

		dl {
			padding-left: $padding-small;
			margin-bottom: 0;

			> div {
				margin-top: $padding-smaller;
			}

			div {
				display: flex;
			}

			dt,
			dd {
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
			}

			dt {
				display: flex;
				align-items: center;
				font-weight: initial;
				flex-shrink: 0;

				// stylelint-disable-next-line
				&.icon-only {
					margin-right: -1 * $padding-smaller;
				}

				.tc-svg-icon {
					margin: 0 $padding-smaller;
					color: tokens.$coral-color-accent-text;
				}
			}

			dd {
				padding: 0 $padding-smaller;
				flex-grow: 1;
				min-width: 0;
			}
		}
	}
}