// Copyright (c) 2016-2018 VMware, Inc. All Rights Reserved.
// This software is released under MIT license.
// The full license information can be found in LICENSE in the root directory of this project.

/**
 * TODO: figure out if we want to include animate.css or if we prefer sticking to a few,
 * controlled animations that we write ourselves.
 *
 * At the moment, we rely on the fact that each ".foo" animation has the hidden styles by default,
 * and ".foo.in" has the displayed styles. This will still be feasible by simply wrapping
 * animate.css, if we want.
 */

$clr-animation-duration: 0.2s;
$clr-animation-easing: ease-in-out;

@include exports('animations.clarity') {
    .fade {
        opacity: 0;
        transition: opacity $clr-animation-duration $clr-animation-easing;
        will-change: opacity;

        &.in {
            opacity: 1;
        }
    }

    .fadeDown {
        opacity: 0;
        transform: translate(0, -25%);
        transition: opacity $clr-animation-duration $clr-animation-easing,
        transform $clr-animation-duration $clr-animation-easing;
        will-change: opacity, transform;

        &.in {
            opacity: 1;
            transform: translate(0, 0);
        }
    }
}