/*
 * Admin panel motion speed.
 *
 * Rule: animations and transitions run between 100ms and 250ms, 150ms by default.
 * Longer ones make the panel feel slow. Surfaces that travel further (drawers,
 * modals, bars that slide in, menus that grow) may take up to 250ms.
 * Endless loading loops (spinners, skeleton pulses) are not covered.
 *
 * This file brings the third-party defaults loaded on every admin page into that
 * range: animate.css (page fade-in, 1s), Tabler/Bootstrap (0.3s to 0.6s), Noty
 * toasts (0.5s) and the two SweetAlert dialogs (0.3s, icons up to 0.8s).
 * It loads after the theme files (ui/inc/styles.blade.php). The jQuery and
 * ApexCharts defaults are in public/js/admin/motion.js.
 */

:root {
    --portal-motion-fast: 100ms;
    --portal-motion: 150ms;
    --portal-motion-slow: 200ms;

    /* animate.css: every page body and header uses `.animated.fadeIn` (default 1s). */
    --animate-duration: var(--portal-motion);
}

/* Tabler / Bootstrap. Bootstrap's JS reads these durations, so its events still fire on time. */
.collapsing,
.collapsing.collapse-horizontal {
    transition-duration: var(--portal-motion-slow);
}

/* A modal fades its backdrop in first, then the dialog: 100ms + 150ms = 250ms in all. */
.modal-backdrop.fade {
    transition-duration: var(--portal-motion-fast);
}

.modal.fade .modal-dialog {
    transition-duration: var(--portal-motion);
}

.offcanvas,
.offcanvas-sm,
.offcanvas-md,
.offcanvas-lg,
.offcanvas-xl,
.offcanvas-xxl {
    --tblr-offcanvas-transition: transform var(--portal-motion-slow) ease-in-out;
}

.progress,
.progress-stacked {
    --tblr-progress-bar-transition: width var(--portal-motion-slow) ease;
}

.card,
.nav-link,
.form-switch .form-check-input {
    transition-duration: var(--portal-motion);
}

/* Phone menu button: the bars-to-cross morph ran 0.4s to 0.6s. */
.navbar-toggler-icon {
    transition: top var(--portal-motion-fast) var(--portal-motion-fast),
                bottom var(--portal-motion-fast) var(--portal-motion-fast),
                transform var(--portal-motion-fast),
                opacity 0s var(--portal-motion-fast);
}

.navbar-toggler[aria-expanded=true] .navbar-toggler-icon {
    transition: top var(--portal-motion-fast),
                bottom var(--portal-motion-fast),
                transform var(--portal-motion-fast) var(--portal-motion-fast),
                opacity 0s var(--portal-motion-fast);
}

/* Noty toasts. `:root` outranks pages that load noty.css again after this file. */
:root .noty_effects_open,
:root .noty_effects_close {
    animation-duration: var(--portal-motion-slow);
}

/*
 * SweetAlert (swal) and SweetAlert2 (Swal) add their CSS from JavaScript, after
 * this file, so these selectors need to outrank theirs.
 */
html:root {
    --swal2-show-animation: swal2-show var(--portal-motion);
    --swal2-toast-show-animation: swal2-toast-show var(--portal-motion-slow);
}

:root .swal2-icon.swal2-icon-show,
:root .swal2-icon.swal2-icon-show .swal2-x-mark,
:root .swal2-icon.swal2-icon-show .swal2-icon-content,
:root .swal2-icon.swal2-icon-show .swal2-success-line-tip,
:root .swal2-icon.swal2-icon-show .swal2-success-line-long,
:root .swal2-icon.swal2-icon-show .swal2-success-circular-line-right {
    animation-duration: 250ms;
}

:root .swal-overlay,
:root .swal-modal {
    transition-duration: var(--portal-motion);
}

:root .swal-overlay--show-modal .swal-modal {
    animation-duration: var(--portal-motion);
}

:root .swal-icon--error,
:root .swal-icon--error__x-mark,
:root .swal-icon--success::after,
:root .swal-icon--success__line--tip,
:root .swal-icon--success__line--long {
    animation-duration: 250ms;
}