﻿
:root {
	--rvw-str-gp: 3px; /* readonly: true */
	--rvw-str-clr: #FFD80A; /* readonly: true */
	--rvw-str-s: 1.5rem; /* { min: 1, max: 4, step: 0.1, friendly: 'Review Star Font Size', group: 'Calculations' } */
	--rvw-str-o: 0.5; /* { min: 0, max: 0.9, step: 0.01, friendly: 'Opacity For Inactive Review Stars', group: 'Calculations' } */
}

/* Review Stars */
.strs {
	gap: var(--rvw-str-gp);
	font-size: var(--rvw-str-s);
	color: var(--rvw-str-clr);
	
	&[class*='rt-1'] {
		
		&:is(.rt-1, .rt-1-0) > :nth-child(n + 2), 
		&:not( :is(.rt-1, .rt-1-0) ) > :nth-child(n + 3) {
			opacity: var(--rvw-str-o);
		}
		
		&:not( :is(.rt-1, .rt-1-0) ) > svg:nth-child(2), 
		&:not( :is(.rt-1, .rt-1-0) ) > :nth-child(2) svg {
			fill: url(#StarsGradient);
		}
		
	}
	
	&[class*='rt-2'] {
		
		&:is(.rt-2, .rt-2-0) > :nth-child(n + 3), 
		&:not( :is(.rt-2, .rt-2-0) ) > :nth-child(n + 4) {
			opacity: var(--rvw-str-o);
		}
		
		&:not( :is(.rt-2, .rt-2-0) ) > svg:nth-child(3), 
		&:not( :is(.rt-2, .rt-2-0) ) > :nth-child(3) svg {
			fill: url(#StarsGradient);
		}
		
	}
	
	&[class*='rt-3'] {
		
		&:is(.rt-3, .rt-3-0) > :nth-child(n + 4), 
		&:not( :is(.rt-3, .rt-3-0) ) > :nth-child(n + 5) {
			opacity: var(--rvw-str-o);
		}
		
		&:not( :is(.rt-3, .rt-3-0) ) > svg:nth-child(4), 
		&:not( :is(.rt-3, .rt-3-0) ) > :nth-child(4) svg {
			fill: url(#StarsGradient);
		}
		
	}
	
	&[class*='rt-4'] {
		
		&:is(.rt-4, .rt-4-0) > :nth-child(n + 5) {
			opacity: var(--rvw-str-o);
		}
		
		&:not( :is(.rt-4, .rt-4-0) ) > svg:nth-child(5), 
		&:not( :is(.rt-4, .rt-4-0) ) > :nth-child(5) svg {
			fill: url(#StarsGradient);
		}
		
	}
}
