@import "_globals.scss";

//! PIN

.pin-transition-enter {
    opacity: 0;
    transform: translate(-40%, -10px) !important;
}

.pin-transition-enter-done {
    opacity: 1;
    transform: translateX(-50%) !important;
    transition: opacity 300ms, transform 300ms;
}

.pin-transition-exit {
    opacity: 1;
    transform: translateX(-50%) !important;
}

.pin-transition-exit-done {
    opacity: 0;
    transform: translate(-40%, -10px) !important;
    transition: opacity 300ms, transform 300ms;
}

//! NOTE

.note-transition-entering{
    opacity: 0;
    transform: var(--initial-transform) scale(0);
}

.note-transition-entered{
    animation: fadeIn 300ms ease-in-out;
    opacity: 1;
    transition: opacity 300ms;
}

.note-transition-exiting{
    animation: fadeOut 300ms ease-in-out;
}

.note-transition-exited{
    opacity: 0;
    transform: var(--initial-transform) scale(0);
    transition: opacity 300ms, transform 300ms;
}

//! MODAL
.modal-transition-entering{
    opacity: 0;
}

.modal-transition-entered{
    animation: fadeIn 300ms ease-in-out;
    opacity: 1;
    transition: opacity 300ms;
}

.modal-transition-exiting{
    animation: fadeOut 300ms ease-in-out;
}

.modal-transition-exited{
    opacity: 0;
    transition: opacity 300ms
}

//! CONTEXT
.context-transition-entering{
    opacity: 0;
}

.context-transition-entered{
    animation: fadeIn 100ms ease-in-out;
    opacity: 1;
    transition: opacity 100ms;
}

.context-transition-exiting{
    animation: fadeOut 100ms ease-in-out;
}

.context-transition-exited{
    opacity: 0;
    transition: opacity 100ms
}