/* =========================================================
   NANES — UTILITIES & ANIMATIONS
   27 — UTILITY
   28 — ANIMATIONS
   ========================================================= */


/* =========================================================
   UTILITY
   ========================================================= */

.row-between {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 12px;
}


.row {

    display: flex;

    align-items: center;

    gap: 10px;
}


.col {

    display: flex;

    flex-direction: column;

    gap: 10px;
}


.text-muted {
    color: var(--text-muted);
}


.text-secondary {
    color: var(--text-secondary);
}


.text-primary {
    color: var(--primary-light);
}


.text-success {
    color: var(--success);
}


.text-danger {
    color: var(--danger);
}


.mt-1 {
    margin-top: 8px;
}


.mt-2 {
    margin-top: 16px;
}


.mt-3 {
    margin-top: 24px;
}


.mb-1 {
    margin-bottom: 8px;
}


.mb-2 {
    margin-bottom: 16px;
}


.mb-3 {
    margin-bottom: 24px;
}


.w-full {
    width: 100%;
}


/* =========================================================
   ANIMATIONS
   ========================================================= */

@keyframes pageEnter {

    from {

        opacity: 0;

        transform:
            translateY(12px);
    }

    to {

        opacity: 1;

        transform:
            translateY(0);
    }
}


@keyframes fadeIn {

    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}


@keyframes modalEnter {

    from {

        opacity: 0;

        transform:
            translateY(15px)
            scale(.97);
    }

    to {

        opacity: 1;

        transform:
            translateY(0)
            scale(1);
    }
}


@keyframes toastEnter {

    from {

        opacity: 0;

        transform:
            translateY(15px)
            scale(.96);
    }

    to {

        opacity: 1;

        transform:
            translateY(0)
            scale(1);
    }
}


@keyframes spin {

    to {

        transform:
            rotate(360deg);
    }
}


@keyframes skeleton {

    100% {

        transform:
            translateX(100%);
    }
}