@import '../constants/animation';

@mixin bdl-transition($time-length, $properties...) {
    transition-timing-function: $bdl-timingFunction;
    transition-duration: $time-length;
    transition-property: $properties;
}

@mixin bdl-openComponentAnimation($time-length) {
    animation: fade-in $bdl-timingFunction $time-length;
}

@mixin bdl-loadingPulseAnimation($start-color, $end-color, $time-length) {
    // TODO: this will create duplicate @keyframes definitions upon each usage
    @keyframes loading-pulse {
        0% {
            background-color: $start-color;
        }

        100% {
            background-color: $end-color;
        }
    }

    animation: loading-pulse .5s ease-in-out infinite alternate, fade-in $time-length $bdl-timingFunction;
}