/* ####################################
   Colors & Background Styles: Spot Colors

   - Critical Rendering Path: Required (if used)

   Notes:
   - Spot colors are simple, single-tone colors without shades. 
   - Up to 12 spot colors are included out of the box and can be configured in Variables.css.
   - If fully configured theme colors are being used in ColorsSite.css, you could consider excluding spot colors because the approach is a little different and it could confuse content authors. However both approaches are valid and can be used side by side, so it's okay to include everything.
   ################################## */

/*
    Background Colors
    - Add specificity with [class*=bg-color-spot-] to avoid !important rules, to override [class*=] rules from the base color system.
*/

[class*=bg-color-spot-] {
    --color: var(--site-text-color);
}

    [class*=bg-color-spot-] a:link,
    a[class*=bg-color-spot-]:link {
        color: var(--link-color);
    }

    [class*=bg-color-spot-] a:visited,
    a[class*=bg-color-spot-]:visited {
        color: var(--link-color-visited);
    }

    [class*=bg-color-spot-] a:hover,
    a[class*=bg-color-spot-]:hover,
    [class*=bg-color-spot-] a:focus,
    a[class*=bg-color-spot-]:focus {
        color: var(--link-hover-color);
        background: var(--link-hover-bg);
        border-color: var(--link-hover-border-color);
    }

[class*=bg-color-spot-].bg-color-spot-1 {
    --color: var(--site-spot-color-1-contrast);
    --color-tint: var(--site-spot-color-1-contrast-tint);
    --link-color: var(--site-spot-color-1-link);
    --link-color-visited: var(--site-spot-color-1-link-visited);
    --link-color-hover: var(--site-spot-color-1-link-hover);
    --bg: var(--site-spot-color-1);
    --icon-color: var(--site-spot-color-1-contrast-tint);
}

    [class*=bg-color-spot-].bg-color-spot-1 h1,
    [class*=bg-color-spot-].bg-color-spot-1 h2,
    [class*=bg-color-spot-].bg-color-spot-1 h3,
    [class*=bg-color-spot-].bg-color-spot-1 h4,
    [class*=bg-color-spot-].bg-color-spot-1 h5,
    [class*=bg-color-spot-].bg-color-spot-1 h6,
    [class*=bg-color-spot-].bg-color-spot-1 table caption {
        color: inherit;
    }

[class*=bg-color-spot-].bg-color-spot-2 {
    --color: var(--site-spot-color-2-contrast);
    --color-tint: var(--site-spot-color-2-contrast-tint);
    --link-color: var(--site-spot-color-2-link);
    --link-color-visited: var(--site-spot-color-2-link-visited);
    --link-color-hover: var(--site-spot-color-2-link-hover);
    --bg: var(--site-spot-color-2);
    --icon-color: var(--site-spot-color-2-contrast-tint);
}

[class*=bg-color-spot-].bg-color-spot-3 {
    --color: var(--site-spot-color-3-contrast);
    --color-tint: var(--site-spot-color-3-contrast-tint);
    --link-color: var(--site-spot-color-3-link);
    --link-color-visited: var(--site-spot-color-3-link-visited);
    --link-color-hover: var(--site-spot-color-3-link-hover);
    --bg: var(--site-spot-color-3);
    --icon-color: var(--site-spot-color-3-contrast-tint);
}

[class*=bg-color-spot-].bg-color-spot-4 {
    --color: var(--site-spot-color-4-contrast);
    --color-tint: var(--site-spot-color-4-contrast-tint);
    --link-color: var(--site-spot-color-4-link);
    --link-color-visited: var(--site-spot-color-4-link-visited);
    --link-color-hover: var(--site-spot-color-4-link-hover);
    --bg: var(--site-spot-color-4);
    --icon-color: var(--site-spot-color-4-contrast-tint);
}

[class*=bg-color-spot-].bg-color-spot-5 {
    --color: var(--site-spot-color-5-contrast);
    --color-tint: var(--site-spot-color-5-contrast-tint);
    --link-color: var(--site-spot-color-5-link);
    --link-color-visited: var(--site-spot-color-5-link-visited);
    --link-color-hover: var(--site-spot-color-5-link-hover);
    --bg: var(--site-spot-color-5);
    --icon-color: var(--site-spot-color-5-contrast-tint);
}

[class*=bg-color-spot-].bg-color-spot-6 {
    --color: var(--site-spot-color-6-contrast);
    --color-tint: var(--site-spot-color-6-contrast-tint);
    --link-color: var(--site-spot-color-6-link);
    --link-color-visited: var(--site-spot-color-6-link-visited);
    --link-color-hover: var(--site-spot-color-6-link-hover);
    --bg: var(--site-spot-color-6);
    --icon-color: var(--site-spot-color-6-contrast-tint);
}

[class*=bg-color-spot-].bg-color-spot-7 {
    --color: var(--site-spot-color-7-contrast);
    --color-tint: var(--site-spot-color-7-contrast-tint);
    --link-color: var(--site-spot-color-7-link);
    --link-color-visited: var(--site-spot-color-7-link-visited);
    --link-color-hover: var(--site-spot-color-7-link-hover);
    --bg: var(--site-spot-color-7);
    --icon-color: var(--site-spot-color-7-contrast-tint);
}

[class*=bg-color-spot-].bg-color-spot-8 {
    --color: var(--site-spot-color-8-contrast);
    --color-tint: var(--site-spot-color-8-contrast-tint);
    --link-color: var(--site-spot-color-8-link);
    --link-color-visited: var(--site-spot-color-8-link-visited);
    --link-color-hover: var(--site-spot-color-8-link-hover);
    --bg: var(--site-spot-color-8);
    --icon-color: var(--site-spot-color-8-contrast-tint);
}

[class*=bg-color-spot-].bg-color-spot-9 {
    --color: var(--site-spot-color-9-contrast);
    --color-tint: var(--site-spot-color-9-contrast-tint);
    --link-color: var(--site-spot-color-9-link);
    --link-color-visited: var(--site-spot-color-9-link-visited);
    --link-color-hover: var(--site-spot-color-9-link-hover);
    --bg: var(--site-spot-color-9);
    --icon-color: var(--site-spot-color-9-contrast-tint);
}

[class*=bg-color-spot-].bg-color-spot-10 {
    --color: var(--site-spot-color-10-contrast);
    --color-tint: var(--site-spot-color-10-contrast-tint);
    --link-color: var(--site-spot-color-10-link);
    --link-color-visited: var(--site-spot-color-10-link-visited);
    --link-color-hover: var(--site-spot-color-10-link-hover);
    --bg: var(--site-spot-color-10);
    --icon-color: var(--site-spot-color-10-contrast-tint);
}

[class*=bg-color-spot-].bg-color-spot-11 {
    --color: var(--site-spot-color-11-contrast);
    --color-tint: var(--site-spot-color-11-contrast-tint);
    --link-color: var(--site-spot-color-11-link);
    --link-color-visited: var(--site-spot-color-11-link-visited);
    --link-color-hover: var(--site-spot-color-11-link-hover);
    --bg: var(--site-spot-color-11);
    --icon-color: var(--site-spot-color-11-contrast-tint);
}

[class*=bg-color-spot-].bg-color-spot-12 {
    --color: var(--site-spot-color-12-contrast);
    --color-tint: var(--site-spot-color-12-contrast-tint);
    --link-color: var(--site-spot-color-12-link);
    --link-color-visited: var(--site-spot-color-12-link-visited);
    --link-color-hover: var(--site-spot-color-12-link-hover);
    --bg: var(--site-spot-color-12);
    --icon-color: var(--site-spot-color-12-contrast-tint);
}

[class*=bg-color-spot-].bg-color-spot-13 {
    --color: var(--site-spot-color-13-contrast);
    --color-tint: var(--site-spot-color-13-contrast-tint);
    --link-color: var(--site-spot-color-13-link);
    --link-color-visited: var(--site-spot-color-13-link-visited);
    --link-color-hover: var(--site-spot-color-13-link-hover);
    --bg: var(--site-spot-color-13);
    --icon-color: var(--site-spot-color-13-contrast-tint);
}

[class*=bg-color-spot-].bg-color-spot-14 {
    --color: var(--site-spot-color-14-contrast);
    --color-tint: var(--site-spot-color-14-contrast-tint);
    --link-color: var(--site-spot-color-14-link);
    --link-color-visited: var(--site-spot-color-14-link-visited);
    --link-color-hover: var(--site-spot-color-14-link-hover);
    --bg: var(--site-spot-color-14);
    --icon-color: var(--site-spot-color-14-contrast-tint);
}

[class*=bg-color-spot-].bg-color-spot-15 {
    --color: var(--site-spot-color-15-contrast);
    --color-tint: var(--site-spot-color-15-contrast-tint);
    --link-color: var(--site-spot-color-15-link);
    --link-color-visited: var(--site-spot-color-15-link-visited);
    --link-color-hover: var(--site-spot-color-15-link-hover);
    --bg: var(--site-spot-color-15);
    --icon-color: var(--site-spot-color-15-contrast-tint);
}

[class*=bg-color-spot-].bg-color-spot-16 {
    --color: var(--site-spot-color-16-contrast);
    --color-tint: var(--site-spot-color-16-contrast-tint);
    --link-color: var(--site-spot-color-16-link);
    --link-color-visited: var(--site-spot-color-16-link-visited);
    --link-color-hover: var(--site-spot-color-16-link-hover);
    --bg: var(--site-spot-color-16);
    --icon-color: var(--site-spot-color-16-contrast-tint);
}

[class*=bg-color-spot-].bg-color-spot-17 {
    --color: var(--site-spot-color-17-contrast);
    --color-tint: var(--site-spot-color-17-contrast-tint);
    --link-color: var(--site-spot-color-17-link);
    --link-color-visited: var(--site-spot-color-17-link-visited);
    --link-color-hover: var(--site-spot-color-17-link-hover);
    --bg: var(--site-spot-color-17);
    --icon-color: var(--site-spot-color-17-contrast-tint);
}

[class*=bg-color-spot-].bg-color-spot-18 {
    --color: var(--site-spot-color-18-contrast);
    --color-tint: var(--site-spot-color-18-contrast-tint);
    --link-color: var(--site-spot-color-18-link);
    --link-color-visited: var(--site-spot-color-18-link-visited);
    --link-color-hover: var(--site-spot-color-18-link-hover);
    --bg: var(--site-spot-color-18);
    --icon-color: var(--site-spot-color-18-contrast-tint);
}

[class*=bg-color-spot-].bg-color-spot-19 {
    --color: var(--site-spot-color-19-contrast);
    --color-tint: var(--site-spot-color-19-contrast-tint);
    --link-color: var(--site-spot-color-19-link);
    --link-color-visited: var(--site-spot-color-19-link-visited);
    --link-color-hover: var(--site-spot-color-19-link-hover);
    --bg: var(--site-spot-color-19);
    --icon-color: var(--site-spot-color-19-contrast-tint);
}

[class*=bg-color-spot-].bg-color-spot-20 {
    --color: var(--site-spot-color-20-contrast);
    --color-tint: var(--site-spot-color-20-contrast-tint);
    --link-color: var(--site-spot-color-20-link);
    --link-color-visited: var(--site-spot-color-20-link-visited);
    --link-color-hover: var(--site-spot-color-20-link-hover);
    --bg: var(--site-spot-color-20);
    --icon-color: var(--site-spot-color-20-contrast-tint);
}

/*
    Border Colors
*/

.border-color-spot-1 { border-color: var(--site-spot-color-1); }
.border-color-spot-2 { border-color: var(--site-spot-color-2); }
.border-color-spot-3 { border-color: var(--site-spot-color-3); }
.border-color-spot-4 { border-color: var(--site-spot-color-4); }
.border-color-spot-5 { border-color: var(--site-spot-color-5); }
.border-color-spot-6 { border-color: var(--site-spot-color-6); }
.border-color-spot-7 { border-color: var(--site-spot-color-7); }
.border-color-spot-8 { border-color: var(--site-spot-color-8); }
.border-color-spot-9 { border-color: var(--site-spot-color-9); }
.border-color-spot-10 { border-color: var(--site-spot-color-10); }
.border-color-spot-11 { border-color: var(--site-spot-color-11); }
.border-color-spot-12 { border-color: var(--site-spot-color-12); }
.border-color-spot-13 { border-color: var(--site-spot-color-13); }
.border-color-spot-14 { border-color: var(--site-spot-color-14); }
.border-color-spot-15 { border-color: var(--site-spot-color-15); }
.border-color-spot-16 { border-color: var(--site-spot-color-16); }
.border-color-spot-17 { border-color: var(--site-spot-color-17); }
.border-color-spot-18 { border-color: var(--site-spot-color-18); }
.border-color-spot-19 { border-color: var(--site-spot-color-19); }
.border-color-spot-20 { border-color: var(--site-spot-color-20); }

/*
    Text & Icon Colors
    - Shouldn't be used often but when they are, they should override everything except local !important styles.
*/

.color-spot-1 {--color: var(--site-spot-color-1) !important; color: var(--site-spot-color-1) !important;}
.color-spot-2 {--color: var(--site-spot-color-2) !important; color: var(--site-spot-color-2) !important;}
.color-spot-3 {--color: var(--site-spot-color-3) !important; color: var(--site-spot-color-3) !important;}
.color-spot-4 {--color: var(--site-spot-color-4) !important; color: var(--site-spot-color-4) !important;}
.color-spot-5 {--color: var(--site-spot-color-5) !important; color: var(--site-spot-color-5) !important;}
.color-spot-6 {--color: var(--site-spot-color-6) !important; color: var(--site-spot-color-6) !important;}
.color-spot-7 {--color: var(--site-spot-color-7) !important; color: var(--site-spot-color-7) !important;}
.color-spot-8 {--color: var(--site-spot-color-8) !important; color: var(--site-spot-color-8) !important;}
.color-spot-9 {--color: var(--site-spot-color-9) !important; color: var(--site-spot-color-9) !important;}
.color-spot-10 {--color: var(--site-spot-color-10) !important; color: var(--site-spot-color-10) !important;}
.color-spot-11 {--color: var(--site-spot-color-11) !important; color: var(--site-spot-color-11) !important;}
.color-spot-12 {--color: var(--site-spot-color-12) !important; color: var(--site-spot-color-12) !important;}
.color-spot-13 {--color: var(--site-spot-color-13) !important; color: var(--site-spot-color-13) !important;}
.color-spot-14 {--color: var(--site-spot-color-14) !important; color: var(--site-spot-color-14) !important;}
.color-spot-15 {--color: var(--site-spot-color-15) !important; color: var(--site-spot-color-15) !important;}
.color-spot-16 {--color: var(--site-spot-color-16) !important; color: var(--site-spot-color-16) !important;}
.color-spot-17 {--color: var(--site-spot-color-17) !important; color: var(--site-spot-color-17) !important;}
.color-spot-18 {--color: var(--site-spot-color-18) !important; color: var(--site-spot-color-18) !important;}
.color-spot-19 {--color: var(--site-spot-color-19) !important; color: var(--site-spot-color-19) !important;}
.color-spot-20 {--color: var(--site-spot-color-20) !important; color: var(--site-spot-color-20) !important;}