.elementor-widget-rating {
	--e-rating-gap: 0px;
	--e-rating-icon-font-size: 16px;
	--e-rating-icon-color: #{$gray-mouse};
	--e-rating-icon-marked-color: #{$orange};
	--e-rating-icon-marked-width: 100%;
	--e-rating-justify-content: flex-start;

	.e-rating {
  		display: flex;
		justify-content: var(--e-rating-justify-content);

		&-wrapper {
			display: flex;
			justify-content: inherit;
			flex-direction: row;
			flex-wrap: wrap;
			width: fit-content;
			margin-block-end: calc(0px - var(--e-rating-gap));
			margin-inline-end: calc(0px - var(--e-rating-gap));
		}

		.e-icon {
			position: relative;
			margin-block-end: var(--e-rating-gap);
			margin-inline-end: var(--e-rating-gap);

			&-wrapper {

				&.e-icon-marked {
					--e-rating-icon-color: var(--e-rating-icon-marked-color);
					width: var(--e-rating-icon-marked-width);
					position: absolute;
					z-index: $first-layer;
					height: 100%;
					inset-inline-start: 0;
					inset-block-start: 0;
					overflow: hidden;
				}

				:is( i, svg ) {
					display: flex;
					flex-shrink: 0;
				}

				i {
					font-size: var(--e-rating-icon-font-size);
					color: var(--e-rating-icon-color);
				}

				svg {
					width: auto;
					height: var(--e-rating-icon-font-size);
					fill: var(--e-rating-icon-color);
				}
			}
		}
	}
}
