.stimulus {
    width: 10dvh;
    height: 10dvh;
    position: absolute;
    display: none;
    z-index: 10;
    border-radius: var(--rounded-full);

    &.active {
        display: block;
    }

    &.yellow {
        background: var(--yellow);
    }

    &.tennis-ball {
        background: url('/assets/img/tennis-ball.svg') center/contain no-repeat;
        overflow: hidden;
    }

    &.triangle {
        background: var(--yellow);
        border-radius: var(--rounded-none);
        clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    }

    &.square {
        background: var(--yellow);
        border-radius: var(--rounded-none);
    }

    &.hexagon {
        background: var(--yellow);
        border-radius: var(--rounded-none);
        clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    }

    &.octagon {
        background: var(--yellow);
        border-radius: var(--rounded-none);
        clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
    }

    &.circle {
        background: var(--yellow);
        border-radius: var(--rounded-full);
    }

    &.red { background: var(--red); }
    &.green { background: var(--green); }
    &.blue { background: var(--blue); }
    &.orange { background: var(--orange); }
    &.purple { background: var(--purple); }
    &.cyan { background: var(--cyan); }
    &.white { background: var(--white); }
}

@media (orientation: portrait) {
    .stimulus {
        width: 5cm;
        height: 5cm;
    }
}