/**
 * Transition
 */

.collapse {

    &-enter-active {
        transition: 200ms all, 250ms max-height ease-out;
    }

    &-leave-active {
        transition: 200ms all;
    }

    &-enter-active,
    &-leave-active {
        overflow: hidden;
    }

    &-enter,
    &-leave-to {
        max-height: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        opacity: 0 !important;
    }

    /* &-enter-to,
  &-leave {
    max-height: 500px;
  } */
}

.fade {

    &-enter-active,
    &-leave-active {
        transition: 120ms opacity ease-in-out;
    }

    &-enter,
    &-leave-to {
        opacity: 0;
    }
}

.fade-from-bottom {
    &-enter-active {
        transition: opacity 400ms ease-out, transform 400ms ease-out;
    }

    &-leave-active {
        transition: opacity 200ms, transform 200ms;
    }

    &-enter {
        opacity: 0;
        transform: translateY(.5rem);
    }

    &-leave-to {
        opacity: 0;
        transform: translateY(-.5rem);
    }
}

.transition-all {
    transition: 300ms all ease
}

.fade-dashboard-card {
    &-enter-active {
        transition: opacity .5s ease-in-out;
        transition-delay: .15s;
    }

    &-enter, &-leave-to {
        opacity: 0;
    }
}

/* .transition-border {
    transition: 300ms border ease
}

.transition-opacity {
    transition: 300ms opacity ease
} */