$particleS: 20px;
$visionS: 100px;

.particle-container {
    position: absolute;
    z-index: 1;
}

.particle-body {
    background-color: #555;
    background-size: $particleS $particleS;
    border-radius: 0 ($particleS / 2) ($particleS / 2) ($particleS / 2);
    height: $particleS;
    margin: #{-$particleS / 2} 0 0 #{-$particleS / 2};
    position: relative;
    width: $particleS;
    z-index: 2;
}

.particle-movement-circle {
    border: 3px dotted darkturquoise;
    position: absolute;
    z-index: 0;
}

.particle-vision {
    // background: #ddd;
    height: $visionS;
    left: -$visionS / 2;
    position: absolute;
    top: -$visionS / 2;
    width: $visionS;
    z-index: 1;
}

.particle-vision-dot {
    $s: 2px;

    background: red;
    height: $s;
    position: absolute;
    width: $s;

    &.removed {
        // background: purple;
        background: green;
    }

    &.touching {
        outline: 2px solid yellow;
    }
}