@import "../../base/var";


@mixin animation-base($className, $keyframeName) {
    $enter-active: #{$className + '-enter-active'};
    $leave-active: #{$className + '-leave-active'};
    $animation-enter: #{$keyframeName + 'In'};
    $animation-leave: #{$keyframeName + 'Out'};

    @at-root {
        .#{$enter-active} {
            animation-name: $animation-enter;
            animation-duration: $--animation-time;
            animation-fill-mode: both;
            @content;
        }

        .#{$leave-active} {
            animation-name: $animation-leave;
            animation-duration: $--animation-time;
            animation-fill-mode: both;
            @content;
        }
    }
}

.slide-transition {
    transition: height $--animation-time ease-in-out;
}
