.single-sector { width: calc(3.141516 * var(--wheel-size) / (var(--sector-count) * var(--size-coef))); display: flex; justify-content: center; align-items: center; height: 50%; -webkit-clip-path: polygon(0 0, 100% 0, 50% 100%, 50% 100%); clip-path: polygon(0 0, 100% 0, 50% 100%, 50% 100%); position: absolute; bottom: 50%; left: 50%; margin-left: calc((-3.141516 * var(--wheel-size) / (var(--sector-count) * var(--size-coef))) / 2); transform-origin: bottom center; }

/* .single-sector:nth-child(even) { background: #a812ff; }

.single-sector:nth-child(odd) { background: #430587; }

.single-sector:last-child { background: #6f2ae0; } */

.single-sector:before { content: ''; position: absolute; top: 1rem; left: 0; right: 0; margin: 0 auto; width: 0.84rem; height: 0.84rem; border-radius: 50%; background-image: url("../images/wheel/wheel-circle.png"); background-repeat: no-repeat; background-size: cover; display: none; }

.single-sector:nth-child(1) { transform: rotate(calc((360deg / var(--sector-count) * 1) - (360deg / var(--sector-count)))); }

.single-sector:nth-child(2) { transform: rotate(calc((360deg / var(--sector-count) * 2) - (360deg / var(--sector-count)))); }

.single-sector:nth-child(3) { transform: rotate(calc((360deg / var(--sector-count) * 3) - (360deg / var(--sector-count)))); }

.single-sector:nth-child(4) { transform: rotate(calc((360deg / var(--sector-count) * 4) - (360deg / var(--sector-count)))); }

.single-sector:nth-child(5) { transform: rotate(calc((360deg / var(--sector-count) * 5) - (360deg / var(--sector-count)))); }

.single-sector:nth-child(6) { transform: rotate(calc((360deg / var(--sector-count) * 6) - (360deg / var(--sector-count)))); }

.single-sector:nth-child(7) { transform: rotate(calc((360deg / var(--sector-count) * 7) - (360deg / var(--sector-count)))); }

.single-sector:nth-child(8) { transform: rotate(calc((360deg / var(--sector-count) * 8) - (360deg / var(--sector-count)))); }

.single-sector:nth-child(9) { transform: rotate(calc((360deg / var(--sector-count) * 9) - (360deg / var(--sector-count)))); }

.single-sector:nth-child(10) { transform: rotate(calc((360deg / var(--sector-count) * 10) - (360deg / var(--sector-count)))); }

.single-sector:nth-child(11) { transform: rotate(calc((360deg / var(--sector-count) * 11) - (360deg / var(--sector-count)))); }

.single-sector:nth-child(12) { transform: rotate(calc((360deg / var(--sector-count) * 12) - (360deg / var(--sector-count)))); }

.single-sector:nth-child(13) { transform: rotate(calc((360deg / var(--sector-count) * 13) - (360deg / var(--sector-count)))); }

.single-sector:nth-child(14) { transform: rotate(calc((360deg / var(--sector-count) * 14) - (360deg / var(--sector-count)))); }

.single-sector:nth-child(15) { transform: rotate(calc((360deg / var(--sector-count) * 15) - (360deg / var(--sector-count)))); }

.single-sector:nth-child(16) { transform: rotate(calc((360deg / var(--sector-count) * 16) - (360deg / var(--sector-count)))); }

.single-sector:nth-child(17) { transform: rotate(calc((360deg / var(--sector-count) * 17) - (360deg / var(--sector-count)))); }

.single-sector:nth-child(18) { transform: rotate(calc((360deg / var(--sector-count) * 18) - (360deg / var(--sector-count)))); }

.single-sector:nth-child(19) { transform: rotate(calc((360deg / var(--sector-count) * 19) - (360deg / var(--sector-count)))); }

.single-sector:nth-child(20) { transform: rotate(calc((360deg / var(--sector-count) * 20) - (360deg / var(--sector-count)))); }

.single-sector:nth-child(21) { transform: rotate(calc((360deg / var(--sector-count) * 21) - (360deg / var(--sector-count)))); }

.single-sector:nth-child(22) { transform: rotate(calc((360deg / var(--sector-count) * 22) - (360deg / var(--sector-count)))); }

.single-sector:nth-child(23) { transform: rotate(calc((360deg / var(--sector-count) * 23) - (360deg / var(--sector-count)))); }

.single-sector:nth-child(24) { transform: rotate(calc((360deg / var(--sector-count) * 24) - (360deg / var(--sector-count)))); }

.single-sector:nth-child(25) { transform: rotate(calc((360deg / var(--sector-count) * 25) - (360deg / var(--sector-count)))); }

.single-sector:nth-child(26) { transform: rotate(calc((360deg / var(--sector-count) * 26) - (360deg / var(--sector-count)))); }

.single-sector:nth-child(27) { transform: rotate(calc((360deg / var(--sector-count) * 27) - (360deg / var(--sector-count)))); }

.single-sector:nth-child(28) { transform: rotate(calc((360deg / var(--sector-count) * 28) - (360deg / var(--sector-count)))); }

.single-sector:nth-child(29) { transform: rotate(calc((360deg / var(--sector-count) * 29) - (360deg / var(--sector-count)))); }

.single-sector:nth-child(30) { transform: rotate(calc((360deg / var(--sector-count) * 30) - (360deg / var(--sector-count)))); }

.single-sector:first-child:nth-last-child(2) { --sector-count: 2; --size-coef: 0.0001; }

.single-sector:first-child:nth-last-child(2) ~ .single-sector { --sector-count: 2; --size-coef: 0.0001; }

.single-sector:first-child:nth-last-child(3) { --sector-count: 3; --size-coef: 0.55; }

.single-sector:first-child:nth-last-child(3) ~ .single-sector { --sector-count: 3; --size-coef: 0.55; }

.single-sector:first-child:nth-last-child(4) { --sector-count: 4; --size-coef: 0.65; }

.single-sector:first-child:nth-last-child(4) ~ .single-sector { --sector-count: 4; --size-coef: 0.65; }

.single-sector:first-child:nth-last-child(5) { --sector-count: 5; --size-coef: 0.8; }

.single-sector:first-child:nth-last-child(5) ~ .single-sector { --sector-count: 5; --size-coef: 0.8; }

.single-sector:first-child:nth-last-child(6) { --sector-count: 6; --size-coef: 0.8; }

.single-sector:first-child:nth-last-child(6) ~ .single-sector { --sector-count: 6; --size-coef: 0.8; }

.single-sector:first-child:nth-last-child(7) { --sector-count: 7; --size-coef: 0.9; }

.single-sector:first-child:nth-last-child(7) ~ .single-sector { --sector-count: 7; --size-coef: 0.9; }

.single-sector:first-child:nth-last-child(8) { --sector-count: 8; --size-coef: 0.94; }

.single-sector:first-child:nth-last-child(8) ~ .single-sector { --sector-count: 8; --size-coef: 0.94; }

.single-sector:first-child:nth-last-child(9) { --sector-count: 9; --size-coef: 0.95; }

.single-sector:first-child:nth-last-child(9) ~ .single-sector { --sector-count: 9; --size-coef: 0.95; }

.single-sector:first-child:nth-last-child(10) { --sector-count: 10; --size-coef: 0.96; }

.single-sector:first-child:nth-last-child(10) ~ .single-sector { --sector-count: 10; --size-coef: 0.96; }

.single-sector:first-child:nth-last-child(11) { --sector-count: 11; --size-coef: 0.97; }

.single-sector:first-child:nth-last-child(11) ~ .single-sector { --sector-count: 11; --size-coef: 0.97; }

.single-sector:first-child:nth-last-child(12) { --sector-count: 12; --size-coef: 0.97; }

.single-sector:first-child:nth-last-child(12) ~ .single-sector { --sector-count: 12; --size-coef: 0.97; }

.single-sector:first-child:nth-last-child(13) { --sector-count: 13; --size-coef: 0.98; }

.single-sector:first-child:nth-last-child(13) ~ .single-sector { --sector-count: 13; --size-coef: 0.98; }

.single-sector:first-child:nth-last-child(14) { --sector-count: 14; --size-coef: 0.98; }

.single-sector:first-child:nth-last-child(14) ~ .single-sector { --sector-count: 14; --size-coef: 0.98; }

.single-sector:first-child:nth-last-child(15) { --sector-count: 15; --size-coef: 0.98; }

.single-sector:first-child:nth-last-child(15) ~ .single-sector { --sector-count: 15; --size-coef: 0.98; }

.single-sector:first-child:nth-last-child(16) { --sector-count: 16; --size-coef: 0.98; }

.single-sector:first-child:nth-last-child(16) ~ .single-sector { --sector-count: 16; --size-coef: 0.98; }

.single-sector:first-child:nth-last-child(17) { --sector-count: 17; --size-coef: 0.98; }

.single-sector:first-child:nth-last-child(17) ~ .single-sector { --sector-count: 17; --size-coef: 0.98; }

.single-sector:first-child:nth-last-child(18) { --sector-count: 18; --size-coef: 0.98; }

.single-sector:first-child:nth-last-child(18) ~ .single-sector { --sector-count: 18; --size-coef: 0.98; }

.single-sector:first-child:nth-last-child(19) { --sector-count: 19; --size-coef: 0.98; }

.single-sector:first-child:nth-last-child(19) ~ .single-sector { --sector-count: 19; --size-coef: 0.98; }

.single-sector:first-child:nth-last-child(20) { --sector-count: 20; --size-coef: 0.98; }

.single-sector:first-child:nth-last-child(20) ~ .single-sector { --sector-count: 20; --size-coef: 0.98; }

.single-sector:first-child:nth-last-child(21) { --sector-count: 21; --size-coef: 0.98; }

.single-sector:first-child:nth-last-child(21) ~ .single-sector { --sector-count: 21; --size-coef: 0.98; }

.single-sector:first-child:nth-last-child(22) { --sector-count: 22; --size-coef: 0.98; }

.single-sector:first-child:nth-last-child(22) ~ .single-sector { --sector-count: 22; --size-coef: 0.98; }

.single-sector:first-child:nth-last-child(23) { --sector-count: 23; --size-coef: 0.98; }

.single-sector:first-child:nth-last-child(23) ~ .single-sector { --sector-count: 23; --size-coef: 0.98; }

.single-sector:first-child:nth-last-child(24) { --sector-count: 24; --size-coef: 0.98; }

.single-sector:first-child:nth-last-child(24) ~ .single-sector { --sector-count: 24; --size-coef: 0.98; }

.single-sector:first-child:nth-last-child(25) { --sector-count: 25; --size-coef: 0.98; }

.single-sector:first-child:nth-last-child(25) ~ .single-sector { --sector-count: 25; --size-coef: 0.98; }

.single-sector:first-child:nth-last-child(26) { --sector-count: 26; --size-coef: 0.98; }

.single-sector:first-child:nth-last-child(26) ~ .single-sector { --sector-count: 26; --size-coef: 0.98; }

.single-sector:first-child:nth-last-child(27) { --sector-count: 27; --size-coef: 0.98; }

.single-sector:first-child:nth-last-child(27) ~ .single-sector { --sector-count: 27; --size-coef: 0.98; }

.single-sector:first-child:nth-last-child(28) { --sector-count: 28; --size-coef: 0.98; }

.single-sector:first-child:nth-last-child(28) ~ .single-sector { --sector-count: 28; --size-coef: 0.98; }

.single-sector:first-child:nth-last-child(29) { --sector-count: 29; --size-coef: 0.98; }

.single-sector:first-child:nth-last-child(29) ~ .single-sector { --sector-count: 29; --size-coef: 0.98; }

.single-sector:first-child:nth-last-child(30) { --sector-count: 30; --size-coef: 0.98; }

.single-sector:first-child:nth-last-child(30) ~ .single-sector { --sector-count: 30; --size-coef: 0.98; }