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

   - Critical Rendering Path: Required

   Notes:
   - Base button colors are defined in Buttons.css. This file is for tweaking those colors on different backrounds. Rough examples are provided.
   - To do: Should these button color treatments actually be defined in ColorsSite.css with some associated button color variables? Possible/Probably.
   ################################## */

/* 
    Primary Buttons
*/

.bg-color-ui .button,
.bg-color-ui-dark .button,
.bg-color-1 .button,
.bg-color-2 .button,
.bg-color-3 .button,
.bg-color-4 .button,
.bg-color-5 .button,
.bg-color-6 .button,
.bg-color-7 .button,
[class*=bg-mid-] .button,
[class*=bg-mid-dark-] .button,
[class*=bg-dark-] .button,
[class*=bg-darker-] .button,
[class*=bg-darkest-] .button {
    border-color: var(--site-color-white) !important;
}

    .bg-color-ui .button:hover,
    .bg-color-ui-dark .button:hover,
    .bg-color-1 .button:hover,
    .bg-color-2 .button:hover,
    .bg-color-3 .button:hover,
    .bg-color-4 .button:hover,
    .bg-color-5 .button:hover,
    .bg-color-6 .button:hover,
    .bg-color-7 .button:hover,
    [class*=bg-mid-] .button:hover,
    [class*=bg-mid-dark-] .button:hover,
    [class*=bg-dark-] .button:hover {
        color: var(--site-button-primary-hover-text-color) !important;
        background: var(--site-button-primary-hover-bg) !important;
        border-color: var(--site-button-primary-hover-border-color) !important;
    }

.bg-color-ui-darker .button,
.bg-color-ui-darkest .button,
[class*=bg-darker-] .button,
[class*=bg-darkest-] .button,
.bg-color-black .button {
}

    .bg-color-ui-darker .button:hover,
    .bg-color-ui-darkest .button:hover,
    [class*=bg-darker-] .button:hover,
    [class*=bg-darkest-] .button:hover,
    .bg-color-black .button:hover {
        color: var(--site-button-primary-hover-text-color) !important;
        background: var(--site-button-primary-hover-bg) !important;
        border-color: var(--site-color-white) !important;
    }

/* Lighter colors come after the dark !important rules because of block nesting. */

.bg-color-ui-lightest .button,
.bg-color-ui-lighter .button,
.bg-color-ui-light .button,
.bg-color-ui-mid-light .button,
[class*=bg-lightest-] .button,
[class*=bg-lighter-] .button,
[class*=bg-light-] .button,
[class*=bg-mid-light-] .button,
.bg-color-white .button {
    color: var(--site-button-primary-text-color) !important;
    background: var(--site-button-primary-bg) !important;
    border-color: var(--site-button-primary-border-color) !important;
}

    .bg-color-ui-lightest .button:hover,
    .bg-color-ui-lighter .button:hover,
    .bg-color-ui-light .button:hover,
    .bg-color-ui-mid-light .button:hover,
    [class*=bg-lightest-] .button:hover,
    [class*=bg-lighter-] .button:hover,
    [class*=bg-light-] .button:hover,
    [class*=bg-mid-light-] .button:hover,
    .bg-color-white .button:hover {
        color: var(--site-button-primary-hover-text-color) !important;
        background: var(--site-button-primary-hover-bg) !important;
        border-color: var(--site-button-primary-hover-border-color) !important;
    }

/* 
    Secondary Buttons
*/

.bg-color-ui .button-secondary,
.bg-color-ui-dark .button-secondary,
.bg-color-1 .button-secondary,
.bg-color-2 .button-secondary,
.bg-color-3 .button-secondary,
.bg-color-4 .button-secondary,
.bg-color-5 .button-secondary,
.bg-color-6 .button-secondary,
.bg-color-7 .button-secondary,
[class*=bg-mid-] .button-secondary,
[class*=bg-mid-dark-] .button-secondary,
[class*=bg-dark-] .button-secondary {
    color: var(--site-button-secondary-text-color) !important;
    background: var(--site-button-secondary-bg) !important;
    border-color: var(--site-button-secondary-bg) !important;
}

    .bg-color-ui .button-secondary:hover,
    .bg-color-ui-dark .button-secondary:hover,
    .bg-color-1 .button-secondary:hover,
    .bg-color-2 .button-secondary:hover,
    .bg-color-3 .button-secondary:hover,
    .bg-color-4 .button-secondary:hover,
    .bg-color-5 .button-secondary:hover,
    .bg-color-6 .button-secondary:hover,
    .bg-color-7 .button-secondary:hover,
    [class*=bg-mid-] .button-secondary:hover,
    [class*=bg-mid-dark-] .button-secondary:hover,
    [class*=bg-dark-] .button-secondary:hover {
        color: var(--site-button-secondary-hover-text-color) !important;
        background: var(--site-button-secondary-hover-bg) !important;
        border-color: var(--site-button-secondary-bg) !important;
    }

.bg-color-ui-darker .button-secondary,
.bg-color-ui-darkest .button-secondary,
[class*=bg-darker-] .button-secondary,
[class*=bg-darkest-] .button-secondary,
.bg-color-black .button-secondary {
    color: var(--site-button-secondary-text-color) !important;
    background: var(--site-button-secondary-bg) !important;
    border-color: var(--site-button-secondary-bg) !important;
}

    .bg-color-ui-darker .button-secondary:hover,
    .bg-color-ui-darkest .button-secondary:hover,
    [class*=bg-darker-] .button-secondary:hover,
    [class*=bg-darkest-] .button-secondary:hover,
    .bg-color-black .button-secondary:hover {
        color: var(--site-button-secondary-hover-text-color) !important;
        background: var(--site-button-secondary-hover-bg) !important;
        border-color: var(--site-button-secondary-bg) !important;
    }

/* Lighter colors come after the dark !important rules because of block nesting. */

.bg-color-ui-lightest .button-secondary,
.bg-color-ui-lighter .button-secondary,
.bg-color-ui-light .button-secondary,
.bg-color-ui-mid-light .button-secondary,
[class*=bg-lightest-] .button-secondary,
[class*=bg-lighter-] .button-secondary,
[class*=bg-light-] .button-secondary,
[class*=bg-mid-light-] .button-secondary,
.bg-color-white .button-secondary {
    color: var(--site-button-secondary-text-color) !important;
    background: var(--site-button-secondary-bg) !important;
    border-color: var(--site-button-secondary-border-color) !important;
}

    .bg-color-ui-lightest .button-secondary:hover,
    .bg-color-ui-lighter .button-secondary:hover,
    .bg-color-ui-light .button-secondary:hover,
    .bg-color-ui-mid-light .button-secondary:hover,
    [class*=bg-lightest-] .button-secondary:hover,
    [class*=bg-lighter-] .button-secondary:hover,
    [class*=bg-light-] .button-secondary:hover,
    [class*=bg-mid-light-] .button-secondary:hover,
    .bg-color-white .button-secondary:hover {
        color: var(--site-button-secondary-hover-text-color) !important;
        background: var(--site-button-secondary-hover-bg) !important;
        border-color: var(--site-button-secondary-hover-border-color) !important;
    }

/*
    Buttons 1 & 2
    - To do: Create a shell for .button-1 and .button-2
*/

.bg-color-ui .button-1 {
}

.bg-color-ui .button-2 {
}