/* Try css variables instead of sass... */
/* https://m2.material.io/develop/web/theming/color */


:root {

    --mdc-theme-primary: #c0ca33;
    --mdc-theme-primary: olive;
    /*	The theme primary color */
    --mdc-theme-secondary: #c0ca33;
    --mdc-theme-secondary: #e6ee9c;
    /*	The theme secondary color */
    --mdc-theme-background: blue;
    /*	The theme background color */
    --mdc-theme-surface: #ffffce;
    /*	The theme surface color */
    --mdc-theme-on-primary: black;
    /*	Text color on top of a primary background */
    --mdc-theme-on-secondary: black;
    /*	Text color on top of a secondary background */
    --mdc-theme-on-surface: black;
    /*	Text color on top of a surface background */
    /*
        https://m2.material.io/develop/web/theming/color#text-styles
        primary	    Used for most text (e.g., text-primary-on-light)
        secondary	Used for text which is lower in the visual hierarchy (e.g., text-secondary-on-light)
        hint	    Used for text hints, such as those in text fields and labels (e.g., text-hint-on-light)
        disabled	Used for text in disabled components and content (e.g., text-disabled-on-light)
        icon	    Used for icons (e.g., text-icon-on-light)

        Text color for TEXT_STYLE on top of light background. Please see Text styles section.
        --mdc-theme-text-<TEXT_STYLE>-on-light
        --mdc-theme-text-<TEXT_STYLE>-on-dark
    */
    --mdc-theme-text-primary-on-dark: black;
    /*
    --mdc-theme-text-on-light: black;
    --mdc-theme-text-primary-on-light: black;
    --mdc-theme-text-secondary-on-light: black;
    --mdc-theme-text-hint-on-light: #8c9900;
    --mdc-theme-text-disabled-on-light: gray;
    --mdc-theme-text-icon-on-light: black;

    --mdc-theme-text-on-dark: violet;
    --mdc-theme-text-primary-on-dark: lightblue;
    --mdc-theme-text-secondary-on-dark: olive;
    --mdc-theme-text-hint-on-dark: orange;
    --mdc-theme-text-disabled-on-dark: lightgray;
    --mdc-theme-text-icon-on-dark: lightblue;
    */

    /* Some not mentioned in the documentation, found by inspection */
    --mdc-checkbox-checked-color: var(--mdc-theme-primary);
    --mdc-checkbox-ink-color: var(--mdc-theme-on-primary);

    --NOmdc-switch-unselected-focus-track-color: var(--mdc-theme-secondary);

}

.mdc-my-slider-colors-fix {
    /* For indicator pop up */
    --mdc-theme-on-primary: #fff;
}