@use "../functions/style";
@use "../settings/defaults";
@use "sass:list";
@use "sass:math";
@use "sass:meta";

@mixin add-vue-transition-hooks($keyframes-id, $duration, $add-fade: true) {
    $animation-duration: style.parse-animation-duration($duration);

    @if ($add-fade == true) {
        &-enter-active {
            animation: fade $animation-duration ease-out,
                $keyframes-id $animation-duration ease-out;
        }

        &-leave-active {
            animation: fade $animation-duration reverse ease-out,
                $keyframes-id $animation-duration reverse ease-out;
        }
    } @else {
        &-enter-active {
            animation: $keyframes-id $animation-duration ease-out;
        }

        &-leave-active {
            animation: $keyframes-id $animation-duration reverse ease-out;
        }
    }
}