body {
    background: #f3f3f3;
}

.component {
    $self: &;
    display: block;
    max-width: 20rem;
    min-height: 20rem;
    margin: 5rem auto;
    background: rebeccapurple;
    position: relative;
    border: 1px dashed rebeccapurple;
    
    // Flip the colors
    &--reversed {
        background: white;
        border-color: lightgray;
    }
    
    &__child-element {
        display: block;
        width: 10rem;
        height: 10rem;
        border-radius: 50%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate3d(-50%, -50%, 0);
        background: white;
        
        // Flip the color when the parent is reversed
        #{ $self }--reversed & {
            background: rebeccapurple;
        }
    }
}