:root {
    --atlas-animations-duration: .5s;
}

/**
  VUE.JS 3 TRANSITION-GROUP (NAME=LIST)
 */

.list-enter-active,
.list-leave-active {
    transition: all var(--atlas-animations-duration) ease;
}

.list-move,
.list-enter-active,
.list-leave-active {
    transition: all var(--atlas-animations-duration) ease;
}

.list-enter-from,
.list-leave-to {
    opacity: 0;
    transform: translateX(30px);
}

.list-leave-active {
    position: absolute;
}