.c-snap-puzzle{
    margin:auto;
    position:relative;
    &__pieces-container{
        min-width:10em;
        min-height:10em;
    }
    &__slots-container{
        position:relative;
        img{
            visibility: hidden;
            max-width: 100%;
        }
    }
    &__piece{
        position: absolute !important;/*Override inline styles*/
        top:0;
        left:0;
        z-index:2;
        &:not(.ui-draggable-disabled){
            cursor: pointer;
        }
    }
    &__slot{
        position:absolute;
        &:after {
            content: "";
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background-color: rgba(0,0,0,0.5);
            opacity:0;
            transition:opacity 400ms ease;
        }
        &.ui-droppable-hover{
            &:after{
                opacity: 1;
            }
        }
        &.c-snap-puzzle__slot--has-piece{
            opacity:1;
        }
        .c-snap-puzzle__piece:not(.ui-draggable-dragging){
            position:relative !important;
            top:0 !important;
            left:0 !important;
        }
    }
    &--slots-background{
        .c-snap-puzzle__slot {
            opacity: 0.3;
        }
    }
    &:not(.c-snap-puzzle--slots-background){
        .c-snap-puzzle__slot{
            border:1px solid #ccc;
        }
    }
}