/* *****************************************************************************
*
*   Note
*
*   Each color has a variant with a suffix -rgb which is useful for functions like rgba().
*
* ***************************************************************************** */


@mixin videotron-color {

    // Brand
    --bf-color-brand                            : #ffd200;
    --bf-color-brand-rgb                        : #{hexToRGB(#ffd200)};

    // Neutral - for content colors only
    --bf-color-primary-irreversible             : #050504; // as the name says : irreversible... doesn't have a reversed state
    --bf-color-neutral-primary                  : #050504;
    --bf-color-neutral-primary-rgb              : #{hexToRGB(#050504)};
    --bf-color-neutral-secondary                : #575754;
    --bf-color-neutral-secondary-rgb            : #{hexToRGB(#575754)};
    --bf-color-neutral-tertiary                 : #AAAAA3;
    --bf-color-neutral-tertiary-rgb             : #{hexToRGB(#AAAAA3)};

    // Stroke
    --bf-color-stroke-primary                   : #94948e;
    --bf-color-stroke-primary-rgb               : #{hexToRGB(#94948e)};
    --bf-color-stroke-secondary                 : #e0e0da;
    --bf-color-stroke-secondary-rgb             : #{hexToRGB(#e0e0da)};
    --bf-color-stroke-tertiary                  : #f2f2f0;
    --bf-color-stroke-tertiary-rgb              : #{hexToRGB(#f2f2f0)};

    // Highlight
    --bf-color-highlight                        : #050504;
    --bf-color-highlight-rgb                    : #{hexToRGB(#050504)};

    // Feedback
    --bf-color-feedback-success                 : #24AD72;
    --bf-color-feedback-success-rgb             : #{hexToRGB(#24AD72)};
    --bf-color-feedback-neutral                 : #ffd200;
    --bf-color-feedback-neutral-rgb             : #{hexToRGB(#ffd200)};
    --bf-color-feedback-warning                 : #DA8000;
    --bf-color-feedback-warning-rgb             : #{hexToRGB(#DA8000)};
    --bf-color-feedback-negative                : #C14D00;
    --bf-color-feedback-negative-rgb            : #{hexToRGB(#C14D00)};

    // Background
    --bf-color-bg-ground                        : #FFFFFF;
    --bf-color-bg-ground-rgb                    : #{hexToRGB(#FFFFFF)};
    --bf-color-bg-underground                   : #F2F2F0;
    --bf-color-bg-underground-rgb               : #{hexToRGB(#F2F2F0)};
    --bf-color-bg-highlight                     : #FFD200;
    --bf-color-bg-highlight-rgb                 : #{hexToRGB(#FFD200)};

    // Background Actions
    --bf-color-bg-action-primary                : #ffd200;
    --bf-color-bg-action-primary-rgb            : #{hexToRGB(#ffd200)};
    --bf-color-bg-action-primary-hover          : #DAB301;
    --bf-color-bg-action-primary-hover-rgb      : #{hexToRGB(#DAB301)};
    --bf-color-bg-action-secondary              : #050504;
    --bf-color-bg-action-secondary-rgb          : #{hexToRGB(#050504)};
    --bf-color-bg-action-secondary-hover        : #373736;
    --bf-color-bg-action-secondary-hover-rgb    : #{hexToRGB(#373736)};
    --bf-color-bg-action-no-bg-hover            : #E6E6E6;
    --bf-color-bg-action-no-bg-hover-rgb        : #{hexToRGB(#E6E6E6)};
    --bf-color-bg-action-disabled               : #F8F8F7;
    --bf-color-bg-action-disabled-rgb           : #{hexToRGB(#F8F8F7)};
    --bf-color-bg-action-selected               : #F8F8F7;
    --bf-color-bg-action-selected-rgb           : #{hexToRGB(#F8F8F7)};

    // gradiants used in tab component
    --bf-color-bg-linear-ground-x               : linear-gradient(to right, rgba(255,255,255,0) 0, #FFFFFF 100%);
    --bf-color-bg-linear-underground-x          : linear-gradient(to right, rgba(242, 242, 240,0) 0, #F2F2F0 100%);

    // Background Overlay
    --bf-color-bg-overlay-black-20prct          : rgba(0,0,0, .2);
    --bf-color-bg-overlay-black-50prct          : rgba(0,0,0, .5);

    .reversed {
        --bf-color-neutral-primary                  : #FFF;
        --bf-color-neutral-primary-rgb              : #{hexToRGB(#FFF)};
        --bf-color-neutral-secondary                : #C4C4BF;
        --bf-color-neutral-secondary-rgb            : #{hexToRGB(#C4C4BF)};
        --bf-color-neutral-tertiary                 : #575754;
        --bf-color-neutral-tertiary-rgb             : #{hexToRGB(#575754)};

        --bf-color-stroke-primary                   : #AAAAA3;
        --bf-color-stroke-primary-rgb               : #{hexToRGB(#AAAAA3)};
        --bf-color-stroke-secondary                 : #575754;
        --bf-color-stroke-secondary-rgb             : #{hexToRGB(#575754)};
        --bf-color-stroke-tertiary                  : #2a2a27;
        --bf-color-stroke-tertiary-rgb              : #{hexToRGB(#2a2a27)};

        --bf-color-highlight                        : #ffd200;
        --bf-color-highlight-rgb                    : #{hexToRGB(#ffd200)};

        --bf-color-bg-ground                        : #050504;
        --bf-color-bg-ground-rgb                    : #{hexToRGB(#050504)};
        --bf-color-bg-underground                   : #2a2a27;
        --bf-color-bg-underground-rgb               : #{hexToRGB(#2a2a27)};

        // --bf-color-bg-action-primary : no change in .reversed
        --bf-color-bg-action-secondary              : #FFFFFF;
        --bf-color-bg-action-secondary-rgb          : #{hexToRGB(#FFFFFF)};
        --bf-color-bg-action-secondary-hover        : #CDCDCD;
        --bf-color-bg-action-secondary-hover-rgb    : #{hexToRGB(#CDCDCD)};
        --bf-color-bg-action-no-bg-hover            : #1E1E1D;
        --bf-color-bg-action-no-bg-hover-rgb        : #{hexToRGB(#1E1E1D)};
        --bf-color-bg-action-disabled               : #171715;
        --bf-color-bg-action-disabled-rgb           : #{hexToRGB(#171715)};
        --bf-color-bg-action-selected               : #171715;
        --bf-color-bg-action-selected-rgb           : #{hexToRGB(#171715)};

        --bf-color-bg-linear-ground-x               : linear-gradient(to right, rgba(05,05,04,0) 0, #050504 100%);
        --bf-color-bg-linear-underground-x          : linear-gradient(to right, rgba(42, 42, 39, 0) 0, #2a2a27 100%);
    }
}