@use '../theme/variables' as vars;

$easing: vars.$transitionTimingFunction;
$duration: vars.$transitionDuration200;

// Fade enter/leave
@keyframes fade-enter {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.fade-enter {
    animation: fade-enter $duration $easing;
}

@keyframes fade-leave {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

.fade-leave {
    animation: fade-leave $duration $easing;
}

// Puff chip
@keyframes puff-chip-enter {
    from {
        opacity: 0;
        filter: blur(4px);
        transform: scale(0.1);
        max-width: 0;
        overflow: hidden;
    }
    to {
        opacity: 1;
        filter: blur(0);
        transform: scale(1);
        max-width: var(--puff-chip-max, 88px);
        overflow: hidden;
    }
}

.puff-chip-enter {
    animation: puff-chip-enter $duration $easing;
    transform-origin: center;
}

@keyframes puff-chip-leave {
    from {
        opacity: 1;
        filter: blur(0);
        transform: scale(1);
        max-width: var(--puff-chip-max, 88px);
        overflow: hidden;
    }
    to {
        opacity: 0;
        filter: blur(4px);
        transform: scale(0.1);
        max-width: 0;
        overflow: hidden;
    }
}

.puff-chip-leave {
    animation: puff-chip-leave $duration $easing;
    transform-origin: center;
}

// Puff container
@keyframes puff-container-enter {
    from {
        opacity: 0;
        filter: blur(4px);
        transform: scale(0.1);
        max-width: 0;
        overflow: hidden;
    }
    to {
        opacity: 1;
        filter: blur(0);
        transform: scale(1);
        max-width: var(--puff-container-max, 300px);
        overflow: visible;
    }
}

.puff-container-enter {
    animation: puff-container-enter $duration $easing;
    transform-origin: center;
}

@keyframes puff-container-leave {
    from {
        opacity: 1;
        filter: blur(0);
        transform: scale(1);
        max-width: var(--puff-container-max, 300px);
        overflow: visible;
    }
    to {
        opacity: 0;
        filter: blur(4px);
        transform: scale(0.1);
        max-width: 0;
        overflow: hidden;
    }
}

.puff-container-leave {
    animation: puff-container-leave $duration $easing;
    transform-origin: center;
}