.coin {
    --coin-size: 48px;
    --coin-width: calc(var(--coin-size) / 10);
    --coin-shapes: 16;
    --coin-shapes-size: calc(var(--coin-size) / var(--coin-shapes) * 2);
    --coin-front-bg: var(--bold-purple);
    --coin-back-bg: var(--bold-purple);
    --coin-side-bg: var(--dark-cyan);
    --coin-rotation-time: 1.0s;

    height: var(--coin-size);
    width: var(--coin-size);
    position: relative;
    transform-style: preserve-3d;
    transform-origin: 50%;

    .front, .back {
        position: absolute;
        height: 100%;
        width: 100%;
        border-radius: 50%;
        background-size: cover;
        overflow: hidden;
    }

    .front {
        background: var(--coin-front-bg);
        transform: translateZ(calc(var(--coin-width) / 2));
    }
    .back {
        background: var(--coin-back-bg);
        transform: translateZ(calc(-1 * var(--coin-width) / 2)) rotateY(180deg);
    }

    .side {
        transform: translateX(calc(var(--coin-size) / 2 - var(--coin-width) / 2));
        transform-style: preserve-3d;
        backface-visibility: hidden;

        .circle {
            height: var(--coin-size);
            width: var(--coin-width);
            position: absolute;
            transform-style: preserve-3d;
            backface-visibility: hidden;

            &:before, &:after {
                content: '';
                display: block;
                height: var(--coin-shapes-size);
                width: var(--coin-width);
                position: absolute;
                transform: rotateX(84deg);
                background: var(--coin-side-bg);
            }

            &:before {
                transform-origin: top center;
            }

            &:after {
                bottom: 0;
                transform-origin: center bottom;
            }

            --deg: 180 / var(--coin-shapes);

            &:nth-child(1) {
                transform: rotateY(90deg) rotateX(calc(var(--deg) * 1deg));
            }
            &:nth-child(2) {
                transform: rotateY(90deg) rotateX(calc(var(--deg) * 2deg));
            }
            &:nth-child(3) {
                transform: rotateY(90deg) rotateX(calc(var(--deg) * 3deg));
            }
            &:nth-child(4) {
                transform: rotateY(90deg) rotateX(calc(var(--deg) * 4deg));
            }
            &:nth-child(5) {
                transform: rotateY(90deg) rotateX(calc(var(--deg) * 5deg));
            }
            &:nth-child(6) {
                transform: rotateY(90deg) rotateX(calc(var(--deg) * 6deg));
            }
            &:nth-child(7) {
                transform: rotateY(90deg) rotateX(calc(var(--deg) * 7deg));
            }
            &:nth-child(8) {
                transform: rotateY(90deg) rotateX(calc(var(--deg) * 8deg));
            }
            &:nth-child(9) {
                transform: rotateY(90deg) rotateX(calc(var(--deg) * 9deg));
            }
            &:nth-child(10) {
                transform: rotateY(90deg) rotateX(calc(var(--deg) * 10deg));
            }
            &:nth-child(11) {
                transform: rotateY(90deg) rotateX(calc(var(--deg) * 11deg));
            }
            &:nth-child(12) {
                transform: rotateY(90deg) rotateX(calc(var(--deg) * 12deg));
            }
            &:nth-child(13) {
                transform: rotateY(90deg) rotateX(calc(var(--deg) * 13deg));
            }
            &:nth-child(14) {
                transform: rotateY(90deg) rotateX(calc(var(--deg) * 14deg));
            }
            &:nth-child(15) {
                transform: rotateY(90deg) rotateX(calc(var(--deg) * 15deg));
            }
            &:nth-child(16) {
                transform: rotateY(90deg) rotateX(calc(var(--deg) * 16deg));
            }
        }
    }

    animation: spin var(--coin-rotation-time) infinite;
    animation-timing-function: linear;
}

@keyframes spin {
    from {
        transform: rotateY(0deg);
    }
    to {
        transform: rotateY(360deg);
    }
}