:root {
    --shadow-brighten-edges-inside:
        0 -1px 0.26rem rgb(var(--color-white), 0.06) inset,
        0 0 0 1px rgb(var(--color-white), 0.06) inset;
    --shadow-brighten-edges-outside:
        0 0.125rem 0.26rem rgb(var(--color-white), 0.06),
        0 0 0 1px rgb(var(--color-white), 0.06);

    // Could be useful for highlighting areas or elements that are focused, using a box-shadow.
    // However, we recommend to use `var(--shadow-depth-8-focus)` to get a more coherent visual effect.
    --shadow-focused-state: 0 0 0 0.125rem
        var(--lime-primary-color, var(--limel-theme-primary-color));

    // Could be useful for highlighting areas or elements that contain errors, using a box-shadow.
    // However, we recommend to use `var(--shadow-depth-8-error)` to get a more coherent visual effect.
    --shadow-error-state: 0 0 0 0.125rem rgb(var(--color-red-default));

    // Good for buttons and clickables such as select dropdowns, or slider grabbers
    --button-shadow-normal:
        0 0.09375rem 0.225rem 0 rgb(var(--color-black), 0.232),
        0 0.01875rem 0.05625rem 0 rgb(var(--color-black), 0.208),
        var(--shadow-brighten-edges-inside);
    --button-shadow-hovered:
        0 0.125rem 0.375rem rgb(var(--color-black), 0.25),
        0 0.4rem 0.475rem -0.3rem rgb(var(--color-black), 0.1),
        var(--shadow-brighten-edges-inside);
    --button-shadow-pressed:
        0 0.0625rem 0.1875rem 0 rgb(var(--color-black), 0.132),
        0 0.01875rem 0.05625rem 0 rgb(var(--color-black), 0.108),
        var(--shadow-brighten-edges-inside);
    --button-shadow-inset:
        0 0.03125rem 0.21875rem 0 rgb(var(--color-black), 0.132) inset,
        0 0.01875rem 0.05625rem 0 rgb(var(--color-black), 0.108) inset,
        var(--shadow-brighten-edges-outside),
        0 0 0.25rem rgb(var(--color-white), 0.9);
    --button-shadow-inset-pressed:
        0 0.03125rem 0.34375rem 0 rgb(var(--color-black), 0.132) inset,
        0 0.01875rem 0.11875rem 0 rgb(var(--color-black), 0.12) inset,
        0 -1px 0.3rem rgb(var(--color-white), 0.9),
        var(--shadow-brighten-edges-outside);

    // Good for Command bars, Command dropdowns, Context menus
    --shadow-depth-8:
        0 0.2rem 0.45rem 0 rgb(var(--color-black), 0.132),
        0 0.0375rem 0.1125rem 0 rgb(var(--color-black), 0.108);
    // Same as above, but when element is focused
    --shadow-depth-8-focused:
        var(--shadow-depth-8), var(--shadow-focused-state);
    // Same as above, but when element is indicating error or warning
    --shadow-depth-8-error: var(--shadow-depth-8), var(--shadow-error-state);
    // Same as above, but light source is below the element, good for bottom bars, etc...
    --shadow-depth-8-reversed:
        0 -0.2rem 0.45rem 0 rgb(var(--color-black), 0.132),
        0 -0.0375rem 0.1125rem 0 rgb(var(--color-black), 0.108);

    // Good for Teaching callouts, Search results dropdown, cards, Tooltips
    --shadow-depth-16:
        0 0.4rem 0.9rem 0 rgb(var(--color-black), 0.132),
        0 0.075rem 0.225rem 0 rgb(var(--color-black), 0.108);

    // Same as above, but when element is focused
    --shadow-depth-16-focused:
        var(--shadow-depth-16), var(--shadow-focused-state);

    // Good for Pop up dialogs
    --shadow-depth-64:
        0 1.6rem 3.6rem 0 rgb(var(--color-black), 0.22),
        0 0.3rem 0.9rem 0 rgb(var(--color-black), 0.18);

    // Same as above, but when element is focused
    --shadow-depth-64-focused:
        var(--shadow-depth-64), var(--shadow-focused-state);

    --shadow-inflated-8:
        -0.125rem -0.125rem 0.375rem rgb(var(--color-black), 0.01),
        -0.25rem -0.25rem 0.625rem rgb(var(--color-white), 0.6),
        0.25rem 0.25rem 0.625rem rgb(var(--color-black), 0.05),
        0.0625rem 0.0625rem 0.625rem rgb(var(--color-white), 0.7),
        -1px -1px 0 1px rgb(var(--color-black), 0.07) inset,
        0 0 1px 1px rgb(var(--color-white), 0.98) inset;
    --shadow-inflated-16:
        -0.1875rem -0.1875rem 0.375rem rgb(var(--color-black), 0.01),
        -0.375rem -0.375rem 1rem rgb(var(--color-white), 0.8),
        0.375rem 0.375rem 1rem rgb(var(--color-black), 0.05),
        0.125rem 0.125rem 0.625rem rgb(var(--color-white), 0.7),
        -1px -1px 0 1px rgb(var(--color-black), 0.07) inset,
        0 0 1px 1px rgb(var(--color-white), 0.98) inset;
    --shadow-inflated-64:
        -0.1875rem -0.1875rem 0.375rem rgb(var(--color-black), 0.01),
        -0.625rem -0.625rem 1.875rem rgb(var(--color-white), 1),
        0.625rem 0.625rem 2.25rem rgb(var(--color-black), 0.06),
        0.125rem 0.125rem 0.625rem rgb(var(--color-white), 0.7),
        -1px -1px 0 1px rgb(var(--color-black), 0.07) inset,
        0 0 1px 1px rgb(var(--color-white), 0.98) inset;
}

// @include mixins.in(dark-mode) {
// latest version is found in `color-palette-extended.css`
// }
// ⚠️ This section below is commented out.
// It's contents are moved to src/style/color-palette-extended.css
//
// Because we don't want to give dark-mode-specific shadows to those
// clients that only import src/style/color-palette-extended-light-mode-only.css
// Because if their OS is in dark mode, not their app,
// The shadows will get rendered too dark, due to `@media (prefers-color-scheme: dark)`
// rule from the mixin. The day we generate `.css` files from these `.scss` files,
// we can do it differently.