@mixin pix-box-shadow($mode, $radius: 0px) {

    position: relative;
    border-radius: $radius;
    &:after {
        content: "";
        position: absolute;
        border-radius: $radius;
        z-index: -1;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
    @if $mode == 'lg' {
        box-shadow: 0px 1px 8px rgba(0, 0, 0, 0.18);
        box-shadow: 0px 15px 20px rgba(0, 0, 0, 0.1), 0px 25px 35px rgba(0, 0, 0, 0.08), -1px 50px 40px -40px rgba(0,0,0,.1), -1px 30px 30px -60px rgba(0,0,0,1);
        &:after {
            box-shadow: 0px 15px 20px rgba(0, 0, 0, 0.1), 0px 25px 35px rgba(0, 0, 0, 0.08), -1px 50px 40px -40px rgba(0,0,0,.1), -1px 30px 30px -60px rgba(0,0,0,1);
        }
    } @else if $mode == 'md' {
        box-shadow: 0px 1px 8px rgba(0, 0, 0, 0.05);
        &:after {
            box-shadow: 0px 15px 20px rgba(0, 0, 0, 0.15);
        }
    } @else if $mode == 'sm' {
        box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.05);
        &:after {
            box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.15);
        }
    }

}

@mixin box-shadow($shadow...) {
    box-shadow: $shadow;
}