@import 'commons';

.m-opacity-transition {
    &.m--has-transition {

        &.m--is-enter-active,
        &.m--is-leave-active {
            &:not(.m--has-zoom-effect) {
                transition: opacity $m-transition-duration-sm linear;
            }

            &.m--has-zoom-effect {
                transition: opacity $m-transition-duration-sm linear, transform $m-transition-duration-sm linear;
            }
        }

        &.m--is-enter,
        &.m--is-leave-to {
            opacity: 0;

            &.m--has-zoom-effect {
                transform: scale(0.7);
            }
        }
    }
}