@use "~admin-stylesheets/colors";

.nelio-content-single-value-in-icon-selector {
	align-items: center;
	display: flex;
	padding: 0.5em;
	position: absolute;

	&__icon-wrapper {
		flex-grow: 0;
		align-items: center;
		justify-content: center;
		width: 24px;
		height: 24px;
	}

	&__icon {
		width: 100%;
		height: 100%;
	}

	&__label {
		flex-grow: 1;
		padding-left: 1em;
	}
}

.nelio-content-icon-option-in-icon-selector {
	align-items: center;
	display: flex;
	padding: 0.5em;

	cursor: default;

	&__icon-wrapper {
		flex-grow: 0;
		align-items: center;
		justify-content: center;
		width: 24px;
		height: 24px;
	}

	&__icon {
		width: 100%;
		height: 100%;
	}

	&__label {
		flex-grow: 1;
		padding-left: 1em;
	}

	&--is-selected {
		background: colors.$component-colors__option-background--is-selected;
		color: colors.$component-colors__option-foreground--is-selected;
	}

	&:hover,
	&--is-focused {
		background: colors.$component-colors__option-background--is-focused;
		color: colors.$component-colors__option-foreground--is-focused;
	}
}