/* Transição padrão */

.btn-tab-switch>.btn,
.btn-tab-switch>.btn::after,
.btn-tab-switch>.btn::before,
.btn-trash::before,
.btn-trash,
.btn-edit::before,
.btn-edit,
.tab,
.listItem,
.anime,
.action,
.radio span,
.resumo-calorias-diarias,
.wizard-message,
button,
input,
app-cardapio-item,
h3 {
    opacity: 0;
    translate: 0px 20px;
    transition: all 0.3s ease-in-out;
    animation: slide-in 0.3s normal cubic-bezier(0.45, 0.05, 0.15, 0.99) forwards;
}

.close-left {
    animation: item-close-left 0.5s normal cubic-bezier(0.37, 0.08, 0, 0.99) forwards;
}

.close-right {
    animation: item-close-right 0.5s normal cubic-bezier(0.37, 0.08, 0, 0.99) forwards;
}

.close-bottom {
    animation: item-close-bottom 0.5s normal cubic-bezier(0.37, 0.08, 0, 0.99) forwards;
}


.show-top {
    animation: item-show-top 0.5s normal cubic-bezier(0.37, 0.08, 0, 0.99) forwards;
}

.show-left {
    animation: item-show-left 0.5s normal cubic-bezier(0.37, 0.08, 0, 0.99) forwards;
}

.show-right {
    animation: item-show-right 0.5s normal cubic-bezier(0.37, 0.08, 0, 0.99) forwards;
}

@keyframes item-show-left {
    0% {
        opacity: 0;
        translate: -80px 0px 0px;
    }

    100% {
        translate: 0px 0px 0px;
        opacity: 1;
    }
}

@keyframes item-show-right {
    0% {
        opacity: 0;
        translate: 80px 0px 0px;
    }

    100% {
        translate: 0px 0px 0px;
        opacity: 1;
    }
}

@keyframes item-show-top {
    0% {
        opacity: 0;
        translate: 0px 80px;
    }

    100% {
        translate: 0px 0px;
        opacity: 1;
    }
}

@keyframes item-close-bottom {
    0% {
        opacity: 1;
        translate: 0px 0px;
    }

    100% {
        translate: 0px -80px;
        opacity: 0;
    }
}

@keyframes item-close-right {
    0% {
        opacity: 1;
        translate: 0px 0px 0px;
    }

    100% {
        translate: 80px 0px -100px;
        opacity: 0;
    }
}

@keyframes item-close-left {
    0% {
        opacity: 1;
        translate: 0px 0px 0px;
    }

    100% {
        translate: -80px 0px -100px;
        opacity: 0;
    }
}

@keyframes slide-in {
    from {
        opacity: 0;
        translate: 0px -20px;
    }

    to {
        translate: 0px 0px;
        opacity: 1;
    }
}