@use "~admin-stylesheets/colors";

.nelio-content-quality-analysis-summary {
	align-items: flex-start;
	display: flex;
	flex-direction: row;
	margin-right: 1em;

	&__icon-wrapper {
		flex-grow: 0;
		flex-shrink: 0;
		width: 2em;
	}

	&__icon {
		align-items: center;
		background: colors.$component-colors__quality-analysis-background--is-unknown;
		border-radius: 100%;
		color: colors.$component-colors__quality-analysis-foreground;
		display: flex;
		height: 1.5em;
		justify-content: center;
		width: 1.5em;

		&--is-perfect {
			background: colors.$component-colors__quality-analysis-background--is-perfect;
		}

		&--is-good {
			background: colors.$component-colors__quality-analysis-background--is-good;
		}

		&--is-improvable {
			background: colors.$component-colors__quality-analysis-background--is-improvable;
		}

		&--is-bad {
			background: colors.$component-colors__quality-analysis-background--is-bad;
		}

		.dashicon {
			height: 1em;
			width: 1em;
			font-size: 1rem;
		}
	}
}