@use '../mixins' as *;

////
/// @package theming
/// @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 rgb(0 0 0 / 0);
        }

        100% {
            box-shadow: 0 0 20px 0 rgb(0 0 0 / 0.35);
        }
    }
}

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

        100% {
            box-shadow:
                0 -12px 20px -12px rgb(0 0 0 / 0.35),
                0 12px 20px -12px rgb(0 0 0 / 0.35);
        }
    }
}

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

        100% {
            box-shadow: 0 -12px 20px -12px rgb(0 0 0 / 0.35);
        }
    }
}

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

        100% {
            box-shadow: 12px -12px 20px -12px rgb(0 0 0 / 0.35);
        }
    }
}

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

        100% {
            box-shadow: 12px 0 20px -12px rgb(0 0 0 / 0.35);
        }
    }
}

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

        100% {
            box-shadow: 12px 12px 20px -12px rgb(0 0 0 / 0.35);
        }
    }
}

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

        100% {
            box-shadow: 0 12px 20px -12px rgb(0 0 0 / 0.35);
        }
    }
}

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

        100% {
            box-shadow: -12px 12px 20px -12px rgb(0 0 0 / 0.35);
        }
    }
}

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

        100% {
            box-shadow: -12px 0 20px -12px rgb(0 0 0 / 0.35);
        }
    }
}

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

        100% {
            box-shadow: -12px -12px 20px -12px rgb(0 0 0 / 0.35);
        }
    }
}

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

        100% {
            box-shadow:
                -12px 0 20px -12px rgb(0 0 0 / 0.35),
                12px 0 20px -12px rgb(0 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 rgb(0 0 0 / 0);
        }

        100% {
            transform: translateZ(50px);
            box-shadow: 0 0 20px 0 rgb(0 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 rgb(0 0 0 / 0),
                0 0 0 0 rgb(0 0 0 / 0);
        }

        100% {
            transform: translateZ(50px);
            box-shadow:
                0 -12px 20px -12px rgb(0 0 0 / 0.35),
                0 12px 20px -12px rgb(0 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 rgb(0 0 0 / 0);
        }

        100% {
            transform: translateZ(50px) translateY(12px);
            box-shadow: 0 -12px 20px -12px rgb(0 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 rgb(0 0 0 / 0);
        }

        100% {
            transform: translateZ(50px) translateX(-12px) translateY(12px);
            box-shadow: 12px -12px 20px -12px rgb(0 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 rgb(0 0 0 / 0);
        }

        100% {
            transform: translateZ(50px) translateX(-12px);
            box-shadow: 12px 0 20px -12px rgb(0 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 rgb(0 0 0 / 0);
        }

        100% {
            transform: translateZ(50px) translateX(-12px) translateY(-12px);
            box-shadow: 12px 12px 20px -12px rgb(0 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 rgb(0 0 0 / 0);
        }

        100% {
            transform: translateZ(50px) translateY(-12px);
            box-shadow: 0 12px 20px -12px rgb(0 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 rgb(0 0 0 / 0);
        }

        100% {
            transform: translateZ(50px) translateX(12px) translateY(-12px);
            box-shadow: -12px 12px 20px -12px rgb(0 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 rgb(0 0 0 / 0);
        }

        100% {
            transform: translateZ(50px) translateX(12px);
            box-shadow: -12px 0 20px -12px rgb(0 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 rgb(0 0 0 / 0);
        }

        100% {
            transform: translateZ(50px) translateX(12px) translateY(12px);
            box-shadow: -12px -12px 20px -12px rgb(0 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 rgb(0 0 0 / 0),
                0 0 0 0 rgb(0 0 0 / 0);
        }

        100% {
            transform: translateZ(50px);
            box-shadow:
                -12px 0 20px -12px rgb(0 0 0 / 0.35),
                12px 0 20px -12px rgb(0 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 rgb(0 0 0 / 0),
                inset 0 0 0 0 rgb(0 0 0 / 0);
        }

        100% {
            box-shadow:
                inset 0 -6px 14px -6px rgb(0 0 0 / 0.5),
                inset 0 6px 14px -6px rgb(0 0 0 / 0.5);
        }
    }
}

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

        100% {
            box-shadow: inset 0 6px 14px -6px rgb(0 0 0 / 0.5);
        }
    }
}

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

        100% {
            box-shadow: inset 0 0 14px 0 rgb(0 0 0 / 0.5);
        }
    }
}

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

        100% {
            box-shadow: inset -6px 6px 14px -6px rgb(0 0 0 / 0.5);
        }
    }
}

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

        100% {
            box-shadow: inset -6px 0 14px -6px rgb(0 0 0 / 0.5);
        }
    }
}

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

        100% {
            box-shadow: inset -6px -6px 14px -6px rgb(0 0 0 / 0.5);
        }
    }
}

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

        100% {
            box-shadow: inset 0 -6px 14px -6px rgb(0 0 0 / 0.5);
        }
    }
}

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

        100% {
            box-shadow: inset 6px -6px 14px -6px rgb(0 0 0 / 0.5);
        }
    }
}

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

        100% {
            box-shadow: inset 6px 0 14px -6px rgb(0 0 0 / 0.5);
        }
    }
}

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

        100% {
            box-shadow: inset 6px 6px 14px -6px rgb(0 0 0 / 0.5);
        }
    }
}

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

        100% {
            box-shadow:
                inset -6px 0 14px -6px rgb(0 0 0 / 0.5),
                inset 6px 0 14px -6px rgb(0 0 0 / 0.5);
        }
    }
}