/* =========================================================
   LOADER THEME VARIABLES
========================================================= */

:root {

    /* DARK */
    --loader-progress-dark: #16A249;
    --loader-bg-dark: #06130B;
    --loader-text-dark: #ffffff;

    /* LIGHT */
    --loader-progress-light: #16A249;
    --loader-bg-light: #ffffff;
    --loader-text-light: #000000;
}


/* =========================================================
   DARK THEME
========================================================= */

body.dark-theme {

    --loader-progress: var(--loader-progress-dark);
    --loader-bg: var(--loader-bg-dark);
    --loader-text: var(--loader-text-dark);
}


/* =========================================================
   LIGHT THEME
========================================================= */

body.light-theme {

    --loader-progress: var(--loader-progress-light);
    --loader-bg: var(--loader-bg-light);
    --loader-text: var(--loader-text-light);
}


/* =========================================================
   LOADER STYLES
========================================================= */

#page-loader {
    background-color: var(--loader-bg);
    background: var(--loader-bg);
    color: var(--loader-text);

    transition:
        background-color 0.4s ease,
        color 0.4s ease;
}


/* Loader segments */
.loader span {
    background: var(--loader-bg);

    transition: background-color 0.4s ease;
}


/* Gradient progress */
div[class*="segment"]:before {
    background:
        linear-gradient(
            to top,
            transparent,
            var(--loader-progress)
        );
}


/* Neon Dot */
.loader i {

    background: var(--loader-progress);

    box-shadow:
        0 0 calc(var(--size) * 0.1) var(--loader-progress),
        0 0 calc(var(--size) * 0.2) var(--loader-progress),
        0 0 calc(var(--size) * 0.3) var(--loader-progress),
        0 0 calc(var(--size) * 0.4) var(--loader-progress),
        0 0 calc(var(--size) * 0.5) var(--loader-progress);

    transition:
        background-color 0.4s ease,
        box-shadow 0.4s ease;
}


/* Loading Text */
#loading {
    color: var(--loader-text);

    transition: color 0.4s ease;
}