:root {
    --clr-smkid1: #0F88BF;
    --clr-smkid2: #1D2D49;

    --clr-wheelItem1: #303DEB;
    --clr-wheelItem2: #79218F;
    --clr-wheelItem3: #F6DA65;
    --clr-wheelItem4: #E63F47;
    --clr-wheelItem5: #0ED280;
    --clr-wheelItem6: #FC7323;
    --clr-wheelItem7: #008735;
    --clr-wheelItem8: #171749;

    /* controlled by js */
    --n: -1; 
    --spin-duration: -1; 

    /* spins */
    --spin: -1;
    --spin1: cubic-bezier(0.12, 0.85, 0.18, 1);
    --spin2: cubic-bezier(0.08, 0.92, 0.25, 1);
    --spin3: cubic-bezier(0.2, 0.7, 0.15, 1);
    --spin4: cubic-bezier(0.05, 0.8, 0.2, 1);
    --spin5: cubic-bezier(0.15, 0.95, 0.1, 1);
    --spin6: cubic-bezier(0.1, 0.6, 0.2, 1);
    --spin7: cubic-bezier(0.18, 0.9, 0.3, 1);
    --spin8: cubic-bezier(0.05, 0.98, 0.15, 1);
    --spin9: cubic-bezier(0.25, 0.75, 0.1, 1);
    --spin10: cubic-bezier(0.09, 0.88, 0.22, 1);
    --total-spins: 10;
}

#item {
    position: relative;
    z-index: 100;

    --size: 1.25rem;
    margin-bottom: calc(var(--size)*1.2);

    &::after {
        content: '';
        height: var(--size);
        width: var(--size);
        background-color: #1D2D49;
        position: absolute;
        bottom: calc(-1 * var(--size) / 2);
        left: 50%;
        transform: translateX(-50%) rotate(45deg);
    }
}

#wheel {
    --width: min(80dvh, 100%);

    aspect-ratio: 1/1;
    width: var(--width);
    user-select: none;
    transition: transform var(--spin-duration) var(--spin);
    transform: rotate(0deg);

    &[data-spinning] {
        cursor: not-allowed;
    }

    span {
        overflow: hidden;
        text-wrap: pretty;
        writing-mode: vertical-rl;
        color: white;
        text-align:center;
        font-size:0.6em;
        font-weight: 500;


        height:50%;
        width:calc(pi * var(--width) / var(--n) + 5px);
        position: absolute;
        clip-path: polygon(100% 0 , 50% 100% , 0 0 );
        display:flex;
        align-items: center;
        justify-content: center;
        transform-origin: bottom;
        left: 50%;
    }
}