/*******************************************************************************
 * Variables used throughout the theme.
 * To adjust anything, simply edit the variables below and rebuild the theme.
 ******************************************************************************/



// Colors
$red-color: #FF3636 !default;
$red-color-dark: #B71C1C !default;
$orange-color: #F29105 !default;
$blue-color: #0076df !default;
$blue-color-dark: #00369f !default;
$cyan-color: #2698BA !default;
$light-cyan-color: lighten($cyan-color, 25%);
$green-color: #00ab37 !default;
$green-color-lime: #B7D12A !default;
$green-color-dark: #009f06 !default;
$green-color-light: #ddffdd !default;
$green-color-bright: #11D68B !default;
$purple-color: #B509AC !default;
$light-purple-color: lighten($purple-color, 25%);
$pink-color: #f92080 !default;
$pink-color-light: #ffdddd !default;
$yellow-color: #efcc00 !default;

$grey-color: #828282 !default;
$grey-color-light: lighten($grey-color, 40%);
$grey-color-dark: darken($grey-color, 25%);

$white-color: #ffffff !default;
$black-color: #000000 !default;

/*******************************************************************************
 * Themes
 ******************************************************************************/

:root {
    --global-bg-color: #{$white-color};
    --global-text-color: #{$black-color};
    --global-text-color-secondary: #{$grey-color-dark};
    --global-theme-color: #{$blue-color};
    --global-hover-color: #{$blue-color-dark};
    --global-footer-bg-color: #{$grey-color-dark};
    --global-footer-text-color: #{$grey-color-light};
    --global-footer-link-color: #{$white-color};
    --global-icon-color: #{$grey-color-dark};

    .fa-sun {
        display: none;
    }

    .fa-moon {
        padding-left: 10px;
        padding-top: 12px;
        display: block;
    }
}

html[data-theme='dark'] {
    --global-bg-color: #{$grey-color-dark};
    --global-text-color: #{$grey-color-light};
    --global-text-color-secondary: #{$grey-color-light};
    --global-theme-color: #{$cyan-color};
    --global-hover-color: #{$light-cyan-color};
    --global-footer-bg-color: #{$grey-color-light};
    --global-footer-text-color: #{$grey-color-dark};
    --global-footer-link-color: #{$black-color};
    --global-icon-color: navajowhite;

    .fa-sun {
        padding-left: 10px;
        padding-top: 12px;
        display: block;
    }

    .fa-moon {
        display: none;
    }
}