/**
 * Styles for managing the popover animations.
 *
 * Ideally, we'd be generating these styles with Aphrodite (along with
 * ReactCSSTransitionGroup's support for custom classnames), but the generated
 * styles have issues on mobile Safari.
 *   See: https://github.com/Khan/aphrodite/issues/68.
 *
 * If the animation durations change, the corresponding values in
 * popover-manager.js must change as well.
 */

@animationDuration: 200ms;

.popover-enter {
    opacity: 0 !important;

    &.popover-enter-active {
        opacity: 1 !important;
        transition: opacity @animationDuration ease-out !important;
    }
}