////
/// @group animations
/// @access public
/// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>
////

/// @requires {mixin} keyframes
@mixin shadow-drop-center {
    @include keyframes(shadow-drop-center) {
        0% {
            box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
        }

        100% {
            box-shadow: 0 0 20px 0 rgba(0, 0, 0, .35);
        }
    }
}

/// @requires {mixin} keyframes
@mixin shadow-drop-tb {
    @include keyframes(shadow-drop-tb) {
        0% {
            box-shadow: 0 0 0 0 rgba(0, 0, 0, 0), 0 0 0 0 rgba(0, 0, 0, 0);
        }

        100% {
            box-shadow: 0 -12px 20px -12px rgba(0, 0, 0, .35), 0 12px 20px -12px rgba(0, 0, 0, .35);
        }
    }
}

/// @requires {mixin} keyframes
@mixin shadow-drop-top {
    @include keyframes(shadow-drop-top) {
        0% {
            box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
        }

        100% {
            box-shadow: 0 -12px 20px -12px rgba(0, 0, 0, .35);
        }
    }
}

/// @requires {mixin} keyframes
@mixin shadow-drop-tr {
    @include keyframes(shadow-drop-tr) {
        0% {
            box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
        }

        100% {
            box-shadow: 12px -12px 20px -12px rgba(0, 0, 0, .35);
        }
    }
}

/// @requires {mixin} keyframes
@mixin shadow-drop-right {
    @include keyframes(shadow-drop-right) {
        0% {
            box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
        }

        100% {
            box-shadow: 12px 0 20px -12px rgba(0, 0, 0, .35);
        }
    }
}

/// @requires {mixin} keyframes
@mixin shadow-drop-br {
    @include keyframes(shadow-drop-br) {
        0% {
            box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
        }

        100% {
            box-shadow: 12px 12px 20px -12px rgba(0, 0, 0, .35);
        }
    }
}

/// @requires {mixin} keyframes
@mixin shadow-drop-bottom {
    @include keyframes(shadow-drop-bottom) {
        0% {
            box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
        }

        100% {
            box-shadow: 0 12px 20px -12px rgba(0, 0, 0, .35);
        }
    }
}

/// @requires {mixin} keyframes
@mixin shadow-drop-bl {
    @include keyframes(shadow-drop-bl) {
        0% {
            box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
        }

        100% {
            box-shadow: -12px 12px 20px -12px rgba(0, 0, 0, .35);
        }
    }
}

/// @requires {mixin} keyframes
@mixin shadow-drop-left {
    @include keyframes(shadow-drop-left) {
        0% {
            box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
        }

        100% {
            box-shadow: -12px 0 20px -12px rgba(0, 0, 0, .35);
        }
    }
}

/// @requires {mixin} keyframes
@mixin shadow-drop-tl {
    @include keyframes(shadow-drop-tl) {
        0% {
            box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
        }

        100% {
            box-shadow: -12px -12px 20px -12px rgba(0, 0, 0, .35);
        }
    }
}

/// @requires {mixin} keyframes
@mixin shadow-drop-tl {
    @include keyframes(shadow-drop-lr) {
        0% {
            box-shadow: 0 0 0 0 rgba(0, 0, 0, 0), 0 0 0 0 rgba(0, 0, 0, 0);
        }

        100% {
            box-shadow: -12px 0 20px -12px rgba(0, 0, 0, .35), 12px 0 20px -12px rgba(0, 0, 0, .35);
        }
    }
}

/// @requires {mixin} keyframes
@mixin shadow-drop-2-center {
    @include keyframes(shadow-drop-2-center) {
        0% {
            transform: translateZ(0);
            box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
        }

        100% {
            transform: translateZ(50px);
            box-shadow: 0 0 20px 0 rgba(0, 0, 0, .35);
        }
    }
}

/// @requires {mixin} keyframes
@mixin shadow-drop-2-tb {
    @include keyframes(shadow-drop-2-tb) {
        0% {
            transform: translateZ(0);
            box-shadow: 0 0 0 0 rgba(0, 0, 0, 0), 0 0 0 0 rgba(0, 0, 0, 0);
        }

        100% {
            transform: translateZ(50px);
            box-shadow: 0 -12px 20px -12px rgba(0, 0, 0, .35), 0 12px 20px -12px rgba(0, 0, 0, .35);
        }
    }
}

/// @requires {mixin} keyframes
@mixin shadow-drop-2-top {
    @include keyframes(shadow-drop-2-top) {
        0% {
            transform: translateZ(0) translateY(0);
            box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
        }

        100% {
            transform: translateZ(50px) translateY(12px);
            box-shadow: 0 -12px 20px -12px rgba(0, 0, 0, .35);
        }
    }
}

/// @requires {mixin} keyframes
@mixin shadow-drop-2-tr {
    @include keyframes(shadow-drop-2-tr) {
        0% {
            transform: translateZ(0) translateX(0) translateY(0);
            box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
        }

        100% {
            transform: translateZ(50px) translateX(-12px) translateY(12px);
            box-shadow: 12px -12px 20px -12px rgba(0, 0, 0, .35);
        }
    }
}

/// @requires {mixin} keyframes
@mixin shadow-drop-2-right {
    @include keyframes(shadow-drop-2-right) {
        0% {
            transform: translateZ(0) translateX(0);
            box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
        }

        100% {
            transform: translateZ(50px) translateX(-12px);
            box-shadow: 12px 0 20px -12px rgba(0, 0, 0, .35);
        }
    }
}

/// @requires {mixin} keyframes
@mixin shadow-drop-2-br {
    @include keyframes(shadow-drop-2-br) {
        0% {
            transform: translateZ(0) translateX(0) translateY(0);
            box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
        }

        100% {
            transform: translateZ(50px) translateX(-12px) translateY(-12px);
            box-shadow: 12px 12px 20px -12px rgba(0, 0, 0, .35);
        }
    }
}

/// @requires {mixin} keyframes
@mixin shadow-drop-2-bottom {
    @include keyframes(shadow-drop-2-bottom) {
        0% {
            transform: translateZ(0) translateY(0);
            box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
        }

        100% {
            transform: translateZ(50px) translateY(-12px);
            box-shadow: 0 12px 20px -12px rgba(0, 0, 0, .35);
        }
    }
}

/// @requires {mixin} keyframes
@mixin shadow-drop-2-bl {
    @include keyframes(shadow-drop-2-bl) {
        0% {
            transform: translateZ(0) translateX(0) translateY(0);
            box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
        }

        100% {
            transform: translateZ(50px) translateX(12px) translateY(-12px);
            box-shadow: -12px 12px 20px -12px rgba(0, 0, 0, .35);
        }
    }
}

/// @requires {mixin} keyframes
@mixin shadow-drop-2-left {
    @include keyframes(shadow-drop-2-left) {
        0% {
            transform: translateZ(0) translateX(0);
            box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
        }

        100% {
            transform: translateZ(50px) translateX(12px);
            box-shadow: -12px 0 20px -12px rgba(0, 0, 0, .35);
        }
    }
}

/// @requires {mixin} keyframes
@mixin shadow-drop-2-tl {
    @include keyframes(shadow-drop-2-tl) {
        0% {
            transform: translateZ(0) translateX(0) translateY(0);
            box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
        }

        100% {
            transform: translateZ(50px) translateX(12px) translateY(12px);
            box-shadow: -12px -12px 20px -12px rgba(0, 0, 0, .35);
        }
    }
}

/// @requires {mixin} keyframes
@mixin shadow-drop-2-lr {
    @include keyframes(shadow-drop-2-lr) {
        0% {
            transform: translateZ(0);
            box-shadow: 0 0 0 0 rgba(0, 0, 0, 0), 0 0 0 0 rgba(0, 0, 0, 0);
        }

        100% {
            transform: translateZ(50px);
            box-shadow: -12px 0 20px -12px rgba(0, 0, 0, .35), 12px 0 20px -12px rgba(0, 0, 0, .35);
        }
    }
}

/// @requires {mixin} keyframes
@mixin shadow-pop-tr {
    @include keyframes(shadow-pop-tr) {
        0% {
            box-shadow: 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e;
            transform: translateX(0) translateY(0);
        }

        100% {
            box-shadow: 1px -1px #3e3e3e, 2px -2px #3e3e3e, 3px -3px #3e3e3e, 4px -4px #3e3e3e, 5px -5px #3e3e3e, 6px -6px #3e3e3e, 7px -7px #3e3e3e, 8px -8px #3e3e3e;
            transform: translateX(-8px) translateY(8px);
        }
    }
}

/// @requires {mixin} keyframes
@mixin shadow-pop-br {
    @include keyframes(shadow-pop-br) {
        0% {
            box-shadow: 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e;
            transform: translateX(0) translateY(0);
        }

        100% {
            box-shadow: 1px 1px #3e3e3e, 2px 2px #3e3e3e, 3px 3px #3e3e3e, 4px 4px #3e3e3e, 5px 5px #3e3e3e, 6px 6px #3e3e3e, 7px 7px #3e3e3e, 8px 8px #3e3e3e;
            transform: translateX(-8px) translateY(-8px);
        }
    }
}

/// @requires {mixin} keyframes
@mixin shadow-pop-bl {
    @include keyframes(shadow-pop-bl) {
        0% {
            box-shadow: 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e;
            transform: translateX(0) translateY(0);
        }

        100% {
            box-shadow: -1px 1px #3e3e3e, -2px 2px #3e3e3e, -3px 3px #3e3e3e, -4px 4px #3e3e3e, -5px 5px #3e3e3e, -6px 6px #3e3e3e, -7px 7px #3e3e3e, -8px 8px #3e3e3e;
            transform: translateX(8px) translateY(-8px);
        }
    }
}

/// @requires {mixin} keyframes
@mixin shadow-pop-tl {
    @include keyframes(shadow-pop-tl) {
        0% {
            box-shadow: 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e;
            transform: translateX(0) translateY(0);
        }

        100% {
            box-shadow: -1px -1px #3e3e3e, -2px -2px #3e3e3e, -3px -3px #3e3e3e, -4px -4px #3e3e3e, -5px -5px #3e3e3e, -6px -6px #3e3e3e, -7px -7px #3e3e3e, -8px -8px #3e3e3e;
            transform: translateX(8px) translateY(8px);
        }
    }
}

/// @requires {mixin} keyframes
@mixin shadow-inset-tb {
    @include keyframes(shadow-inset-tb) {
        0% {
            box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0), inset 0 0 0 0 rgba(0, 0, 0, 0);
        }

        100% {
            box-shadow: inset 0 -6px 14px -6px rgba(0, 0, 0, .5), inset 0 6px 14px -6px rgba(0, 0, 0, .5);
        }
    }
}

/// @requires {mixin} keyframes
@mixin shadow-inset-top {
    @include keyframes(shadow-inset-top) {
        0% {
            box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0);
        }

        100% {
            box-shadow: inset 0 6px 14px -6px rgba(0, 0, 0, .5);
        }
    }
}

/// @requires {mixin} keyframes
@mixin shadow-inset-center {
    @include keyframes(shadow-inset-center) {
        0% {
            box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0);
        }

        100% {
            box-shadow: inset 0 0 14px 0 rgba(0, 0, 0, .5);
        }
    }
}

/// @requires {mixin} keyframes
@mixin shadow-inset-tr {
    @include keyframes(shadow-inset-tr) {
        0% {
            box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0);
        }

        100% {
            box-shadow: inset -6px 6px 14px -6px rgba(0, 0, 0, .5);
        }
    }
}

/// @requires {mixin} keyframes
@mixin shadow-inset-right {
    @include keyframes(shadow-inset-right) {
        0% {
            box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0);
        }

        100% {
            box-shadow: inset -6px 0 14px -6px rgba(0, 0, 0, .5);
        }
    }
}

/// @requires {mixin} keyframes
@mixin shadow-inset-br {
    @include keyframes(shadow-inset-br) {
        0% {
            box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0);
        }

        100% {
            box-shadow: inset -6px -6px 14px -6px rgba(0, 0, 0, .5);
        }
    }
}

/// @requires {mixin} keyframes
@mixin shadow-inset-bottom {
    @include keyframes(shadow-inset-bottom) {
        0% {
            box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0);
        }

        100% {
            box-shadow: inset 0 -6px 14px -6px rgba(0, 0, 0, .5);
        }
    }
}

/// @requires {mixin} keyframes
@mixin shadow-inset-bl {
    @include keyframes(shadow-inset-bl) {
        0% {
            box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0);
        }

        100% {
            box-shadow: inset 6px -6px 14px -6px rgba(0, 0, 0, .5);
        }
    }
}

/// @requires {mixin} keyframes
@mixin shadow-inset-left {
    @include keyframes(shadow-inset-left) {
        0% {
            box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0);
        }

        100% {
            box-shadow: inset 6px 0 14px -6px rgba(0, 0, 0, .5);
        }
    }
}

/// @requires {mixin} keyframes
@mixin shadow-inset-tl {
    @include keyframes(shadow-inset-tl) {
        0% {
            box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0);
        }

        100% {
            box-shadow: inset 6px 6px 14px -6px rgba(0, 0, 0, .5);
        }
    }
}

/// @requires {mixin} keyframes
@mixin shadow-inset-lr {
    @include keyframes(shadow-inset-lr) {
        0% {
            box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0), inset 0 0 0 0 rgba(0, 0, 0, 0);
        }

        100% {
            box-shadow: inset -6px 0 14px -6px rgba(0, 0, 0, .5), inset 6px 0 14px -6px rgba(0, 0, 0, .5);
        }
    }
}