// Local variables for reused colors
//light main text
$darkest   : #333;

//light secondary
$darker    : #333;

//light disabled
$dark      : #ffffff;

//light border and buttons
$medium    : #d7d7d7;

//light inputs 
$light     : #E8F4FF;

//light sidebar and box
$lighter   : #F4F5FA;

//light body bg
$lightest  : #FFFFFF;

//color for items that are not enabled
// $disabled  : $medium;
$disabled  : #f5f5f5;

$primary         : #1890FF;
$secondary       : $darker;
// $link            : #3D98D3;
$link            : #1890FF;

// Status colors
$success         : #1890FF;
$warning         : #DAC342;
$error           : #F64747;
// $error           : #A30014;
$info            : #1890FF;

$contrasted-dark: $darkest !default;
$contrasted-light: $lightest !default;

// Text selection color for terminal window (we don't want this to change with the primary color)
// The terminal alway uses a light background, so okay to use a fixed color
$selected: rgba(#3D98D3, .5);

$drag-over: #E8F4FF;

BODY, .theme-light {

  --primary                    : #{$primary};
  --primary-text               : #{contrast-color($primary)};
  // --primary-hover-bg           : #{darken($primary, 10%)};
  --primary-hover-bg           : #{$primary};
  --primary-hover-text         : #{saturate($lightest, 20%)};
  --primary-active-bg          : #{darken($primary, 25%)};
  --primary-active-text        : #{contrast-color(darken($primary, 25%))};
  --primary-border             : #{$primary};
  --primary-banner-bg          : #{rgba($primary, 0.15)};
  --primary-light-bg           : #{rgba($primary, 0.05)};


  .text-primary {
    color: var(--primary) !important;
  }

  .bg-primary {
    background-color: var(--primary);
    color: var(--primary-text);

    &.btn:hover {
      color: var(--primary-hover-text);
      // background: var(--primary-hover-bg);
      box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.2) !important;
      transition: all 0.3s ease;
    }

    &.btn:active {
      color: var(--primary-active-text);
      background: var(--primary-active-bg);
      }
  }

  --link                    : #{$link};
  --link-text               : #{contrast-color($link)};
  --link-hover-bg           : #{darken($link, 10%)};
  --link-hover-text         : #{saturate($lightest, 20%)};
  --link-active-bg          : #{darken($link, 25%)};
  --link-active-text        : #{contrast-color(darken($link, 25%))};
  --link-border             : #{$link};
  --link-banner-bg          : #{rgba($link, 0.15)};
  --link-light-bg           : #{rgba($link, 0.05)};
 

  
  .text-link {
    color: var(--link) !important;
  }

  .bg-link {
    background-color: var(--link);
    color: var(--link-text);

    &.btn:hover {
      color: var(--link-hover-text);
      background: var(--link-hover-bg);
      transition: all 0.3s ease;
    }

    &.btn:active {
      color: var(--link-active-text);
      background: var(--link-active-bg);
      }
  }

  --lightest                   : #{rgba($lightest, 1)};

  --default                    : #{$light};
  --default-text               : #{contrast-color($light)};
  --default-hover-bg           : #{darken($light, 10%)};
  --default-hover-text         : #{saturate($lightest, 20%)};
  --default-active-bg          : #{darken($light, 25%)};
  --default-active-text        : #{contrast-color(darken($light, 25%))};
  --default-border             : #{$light};
  --default-banner-bg          : #{rgba($light, 0.15)};
  --default-light-bg           : #{rgba($light, 0.05)};
  --slider-light-bg            : #{rgba($lightest, 1)};
  --slider-light-bg-right      : #{rgba($lightest, 0)};


  .text-default {
    color: var(--default) !important;
  }

  .bg-default {
    background-color: var(--default);
    color: var(--default-text);

    &.btn:hover {
      color: var(--default-hover-text);
      background: var(--default-hover-bg);
      transition: all 0.3s ease;
    }

    &.btn:active {
      color: var(--default-active-text);
      background: var(--default-active-bg);
      }
  }

  // --muted                      : #{$dark};
  --muted                      : #A8ABB2;

  .text-muted {
    color: var(--muted) !important;
  }

  --darker                    : #{$darker};
  --darker-text               : #{contrast-color($darker)};
  --darker-hover-bg           : #{darken($darker, 10%)};
  --darker-hover-text         : #{saturate($lightest, 20%)};
  --darker-active-bg          : #{darken($darker, 25%)};
  --darker-active-text        : #{contrast-color(darken($darker, 25%))};
  --darker-border             : #{$darker};
  --darker-banner-bg          : #{rgba($darker, 0.15)};
  --darker-light-bg           : #{rgba($darker, 0.05)};

  .text-darker {
    color: var(--default) !important;
  }

  .bg-darker {
    // background-color: var(--darker);
    background-color: #dd0c17;
    color: var(--darker-text);

    &.btn:hover {
      color: var(--darker-hover-text);
      background: var(--darker-hover-bg);
      transition: all 0.3s ease;
    }

    &.btn:active {
      color: var(--darker-active-text);
      background: var(--darker-active-bg);
      }
  }



  --success                    : #{$success};
  --success-new                    : #{$info};
  --success-text               : #{contrast-color($success)};
  --success-hover-bg           : #{darken($success, 10%)};
  --success-hover-text         : #{saturate($lightest, 20%)};
  --success-active-bg          : #{darken($success, 25%)};
  --success-active-text        : #{contrast-color(darken($success, 25%))};
  --success-border             : #{$success};
  --success-banner-bg          : #{rgba($success, 0.15)};
  --success-light-bg           : #{rgba($success, 0.05)};

  .text-success {
    color: var(--success) !important;
  }

  .bg-success {
    background-color: var(--success);
    color: var(--success-text);

    &.btn:hover {
      color: var(--success-hover-text);
      background: var(--success-hover-bg);
      transition: all 0.3s ease;
    }

    &.btn:active {
      color: var(--success-active-text);
      background: var(--success-active-bg);
      }
  }


  --info                    : #{$info};
  --info-text               : #{contrast-color($info)};
  --info-hover-bg           : #{darken($info, 10%)};
  --info-hover-text         : #{saturate($lightest, 20%)};
  --info-active-bg          : #{darken($info, 25%)};
  --info-active-text        : #{contrast-color(darken($info, 25%))};
  --info-border             : #{$info};
  --info-banner-bg          : #{rgba($info, 0.15)};
  --info-light-bg           : #{rgba($info, 0.05)};

  .text-info {
    color: var(--info) !important;
  }

  .bg-info {
    background-color: var(--info);
    color: var(--info-text);

    &.btn:hover {
      color: var(--info-hover-text);
      background: var(--info-hover-bg);
      transition: all 0.3s ease;
    }

    &.btn:active {
      color: var(--info-active-text);
      background: var(--info-active-bg);
      }
  }


  --warning                    : #{$warning};
  --warning-text               : #{contrast-color($warning)};
  --warning-hover-bg           : #{darken($warning, 10%)};
  --warning-hover-text         : #{saturate($lightest, 20%)};
  --warning-active-bg          : #{darken($warning, 25%)};
  --warning-active-text        : #{contrast-color(darken($warning, 25%))};
  --warning-border             : #{$warning};
  --warning-banner-bg          : #{rgba($warning, 0.15)};
  --warning-light-bg           : #{rgba($warning, 0.05)};

  .text-warning {
    // color: var(--error) !important;
    color: #A30014 !important;
    line-height: 20px;
  }

  .bg-warning {
    background-color: var(--warning);
    color: var(--warning-text);

    &.btn:hover {
      color: var(--warning-hover-text);
      background: var(--warning-hover-bg);
      transition: all 0.3s ease;
    }

    &.btn:active {
      color: var(--warning-active-text);
      background: var(--warning-active-bg);
      }
  }


  --error                    : #{$error};
  --error-text               : #{contrast-color($error)};
  --error-hover-bg           : #{darken($error, 10%)};
  --error-hover-text         : #{saturate($lightest, 20%)};
  --error-active-bg          : #{darken($error, 25%)};
  --error-active-text        : #{contrast-color(darken($error, 25%))};
  --error-border             : #{$error};
  --error-banner-bg          : #{rgba($error, 0.15)};
  --error-light-bg           : #{rgba($error, 0.05)};


  .text-error {
    color: var(--error) !important;
    line-height: 16px;
  }

  .bg-error {
    background-color: var(--error);
    color: var(--error-text);

    &.btn:hover {
      color: var(--error-hover-text);
      background: var(--error-hover-bg);
      transition: all 0.3s ease;
    }

    &.btn:active {
      color: var(--error-active-text);
      background: var(--error-active-bg);
      }
  }
  

  --body-bg                    : #{$lightest};
  --body-text                  : #{$darkest};
  --scrollbar-thumb            : #{$dark};
  --scrollbar-thumb-dropdown   : #{$lighter};
  --scrollbar-track            : transparent;

  // Header, Footer and Consent banner defaults
  --banner-text-color          : #{$darkest};

  --header-bg                  : #{$lightest};
  --header-btn-bg              : transparent;
  --header-btn-text            : #{$darkest};
  --header-btn-text-hover      : #{$lightest};
  --header-input-text          : #{$darkest};
  --header-height              : 50px;
  --header-border              : #{$medium};
  --header-border-size         : 1px;
  --nav-width                  : 205px;
  --nav-bg                     : #{$lightest};
  --nav-active                 : #{$light};
  --nav-hover                  : #{$medium};
  --nav-hover-color            :#1890FF;
  --nav-expander-hover         : #{darken($medium, 10%)};
  --nav-icon-badge-bg          : #{$dark};
  --nav-border                 : #{$medium};
  --nav-border-size            : 1px;

  --footer-bg                  : transparent;
  --footer-height              : 0px;

  --topmenu-bg                 : #{$lightest};
  --topmenu-text               : #{$darkest};
  --topmost-border             : #{$medium};
  --topmost-shadow             : #{lighten($lightest, 10%)};
  --topmost-light-hover        : #{$light};

  --disabled-bg                : #{$disabled};
  // --disabled-text              : #{$secondary};
  --disabled-text              : #b8b8b8;;
  --box-bg                     : #{$lighter};
  --subtle-border              : #{$medium};
  --border                     : #{$medium};
  --border-width               : 1px;
  --border-radius              : 2px;
  // --outline                    : var(--primary);
  --outline                    : #d9d9d9;
  --outline-width              : 1px;

  --accent-btn                 : var(--primary-banner-bg);
  --accent-btn-hover           : var(--primary);
  --accent-btn-hover-text      : #{$lightest};

  --modal-bg                   : #{$lightest};
  --modal-border               : #{$dark};
  --overlay-bg                 : #{rgba($lighter, 0.75)};
  --overlay-model-bg           : rgba(0, 0, 0, 0.45);
  --overlay-model-bg           : rgba(0, 0, 0, 0.45);
  --shadow                     : #{rgba($medium, 0.85)};

  --checkbox-tick              : #{$lightest};
  --checkbox-border            : #{$medium};
  --checkbox-tick-disabled     : #{darken($disabled, 40%)};
  --checkbox-disabled-bg       : #{$disabled};
  --checkbox-ticked-bg         : var(--link);

  --drag-over-inner-bg         : #{rgba($drag-over, 0.9)};
  --drag-over-outer-bg         : #{rgba($drag-over, 0)};

  --dropdown-bg                : #{$lightest};
  --dropdown-border            : #{$medium};
  --dropdown-divider           : #{$medium};
  --dropdown-text              : #{$darkest};
  // --dropdown-active-text       : #{$lightest};
  --dropdown-active-text       : #333;
  // --dropdown-active-bg         : #{$dark};
  --dropdown-active-bg         : #f7f9fa;
  // --dropdown-hover-text        : #{$lightest};
  --dropdown-hover-text        : #333;
   // --dropdown-hover-bg          : var(--link);
  --dropdown-hover-bg          : #f7f9fa;
  --dropdown-disabled-text     : var(--muted);
  --dropdown-disabled-bg       : #{$disabled};
  --dropdown-highlight-text    : var(--link);

  --card-badge-text            : #ffffff;

  // UNUSED?
  --card-header                : var(--primary-banner-bg);

  --input-text                 : #{$darkest};
  --input-label                : #{$secondary};
  --input-placeholder          : #{darken($disabled, 10%)};
  --input-border               : var(--border);
  --input-border-box-shadow    : rgba(0,0,0,.2);
  --input-bg                   : var(--body-bg);
  --input-bg-accent            : #{darken($light, 2%)};
  --input-hover-bg             : var(--box-bg);
  --input-focus-bg             : var(--box-bg);
  --input-disabled-text        : #{darken($disabled, 60%)};
  --input-disabled-label       : #{darken($disabled, 40%)};
  --input-disabled-bg          : #f5f5f5;
  --input-disabled-border      : #{darken($medium, 10%)};
  --input-disabled-placeholder : #{darken($medium, 15%)};
  --input-addon-bg             : #{$darker};
  --input-hover-border         : #d7d7d7;


  --progress-bg                : #{$medium};
  --progress-divider           : #{$medium};

  --sortable-table-bg          : #{darken($lightest, 5%)};
  --sortable-table-row-bg      : #{$lightest};
  // --sortable-table-header-bg   : #{$lighter};
  --sortable-table-header-bg   : #f8f9fa;
  --sortable-table-top-divider : var(--border);
  --sortable-table-body-divider : #{$medium};

  // --sortable-table-hover-bg    : #{$lighter};
  --sortable-table-hover-bg    :#ebf4fa;
  //--sortable-table-selected-bg : #{rgba($primary, 0.02)};

  // --sortable-table-selected-bg : var(--primary-light-bg);
  --sortable-table-selected-bg : #ebf4fa;
  --sortable-table-group-label : #{$secondary};

  --tag-primary                : #{$darkest};
  --tag-bg                     : #{$medium};

  --popover-bg                 : var(--body-bg);
  --popover-border             : var(--border);
  --popover-text               : var(--body-text);
  --popover-border-radius      : var(--border-radius);
  // --tooltip-bg                 : #{$medium};
  --tooltip-bg                 : #fff;
  --tooltip-border             : var(--tag-primary);
  --tooltip-text               : var(--tag-primary);
  --tooltip-bg-warning         : #{rgba($warning, 0.8)};
  --tooltip-text-warning       : var(--body-text);

  --tabbed-border              : #{$medium};
  --tabbed-sidebar-bg          : #{$lighter};
  --tabbed-container-bg        : #{mix($light, $lighter, 15%)};

  --yaml-editor-bg             : #{$lighter};

  --diff-border                : var(--border);
  --diff-header-bg             : var(--nav-bg);
  --diff-header-border         : var(--border);
  --diff-header                : #{rgba($darkest, 0.3)};
  --diff-linenum-bg            : var(--nav-bg);
  --diff-linenum               : var(--muted);
  --diff-linenum-border        : var(--border);
  --diff-line-ins-bg           : $success;
  --diff-line-del-bg           : #{rgba($error, 0.75)};
  --diff-del-bg                : #{rgba($error, 0.3)};
  --diff-del-border            : #{$error};
  --diff-ins-bg                : #{rgba($success, 0.3)};
  --diff-ins-border            : #{rgba($success, 0.5)};
  --diff-chg-ins               : #{rgba($success, 0.25)};
  --diff-chg-del               : #{rgba($warning, 0.5)};
  --diff-empty-placeholder     : #{$lightest};

  --wm-tabs-bg                 : #{$medium};
  --wm-tab-bg                  : #{$light};
  --wm-closer-hover-bg         : #{$lighter};
  --wm-tab-active-bg           : #{$lighter};
  --wm-title-bg                : #{$lightest};
  --wm-title-border            : #{$medium};
  --wm-body-bg                 : #{$lighter};
  --wm-border                  : var(--border);
  --wm-tab-height              : 29px;

  --glance-bg-rgb              : 61, 152, 211;
  --glance-divider             : #{$medium};

  --resource-gauge-back-circle : 255, 255, 255, 0.15;

  --simple-box-bg              : #{$lightest};
  --simple-box-border          : #{$medium};
  --simple-box-divider         : #{$medium};
  --simple-box-shadow          : none;

  --terminal-bg                : var(--body-bg);
  --terminal-cursor            : var(--warning);
  --terminal-selection         : #{$selected};
  --terminal-text              : var(--body-text);

  --logs-bg                    : var(--wm-body-bg);
  --logs-highlight             : var(--wm-body-bg);
  --logs-highlight-bg          : var(--warning);
  --logs-text                  : var(--body-text);

  --gauge-divider              : #{$lightest};
  --gauge-zero                 : #{$medium};
  --gauge-success-primary      : 150, 189, 127;
  --gauge-success-secondary    : 190, 211, 172;
  --gauge-warning-primary      : 238, 226, 176;
  --gauge-warning-secondary    : 218, 195, 66;
  --gauge-error-primary        : 249, 186, 171;
  --gauge-error-secondary      : 239, 90, 83;

  --sizzle-0                   : 180, 210, 30;
  --sizzle-1                   : 225, 45, 74;
  --sizzle-2                   : 212, 66, 148;
  --sizzle-3                   : 0, 169, 217;
  --sizzle-4                   : 244, 136, 68;
  --sizzle-5                   : 0, 147, 128;
  --sizzle-6                   : 136, 81, 165;
  --sizzle-7                   : 45, 47, 149;
  --sizzle-8                   : 255, 235, 0;

  --sizzle-success             : #{red($success)}, #{green($success)}, #{blue($success)};
  --sizzle-info                : #{red($info)},    #{green($info)},    #{blue($info)};
  --sizzle-warning             : #{red($warning)}, #{green($warning)}, #{blue($warning)};
  --sizzle-error               : #{red($error)},   #{green($error)},   #{blue($error)};
  --sizzle-unknown             : #{red($disabled)},#{green($disabled)},#{blue($disabled)};

  $rancher                     : $primary;
  $partner                     : #FEA424;
  $other                       : #614EA2;

  --app-rancher-accent         : #{$rancher};
  --app-rancher-accent-text    : #ffffff;

  --app-partner-accent         : #{$partner};
  --app-partner-accent-text    : black;

  --app-color1-accent          : rgba(var(--sizzle-1), 1);
  --app-color1-accent-text     : white;

  --app-color2-accent          : rgba(var(--sizzle-2), 1);
  --app-color2-accent-text     : white;

  --app-color3-accent          : rgba(var(--sizzle-3), 1);
  --app-color3-accent-text     : white;

  --app-color4-accent          : rgba(var(--sizzle-4), 1);
  --app-color4-accent-text     : white;

  --app-color5-accent          : rgba(var(--sizzle-5), 1);
  --app-color5-accent-text     : white;

  --app-color6-accent          : rgba(var(--sizzle-6), 1);
  --app-color6-accent-text     : white;

  --app-color7-accent          : rgba(var(--sizzle-7), 1);
  --app-color7-accent-text     : white;

  --app-color8-accent          : rgba(var(--sizzle-8), 1);
  --app-color8-accent-text     : white;

  --product-icon               : #{$darker};
  --product-icon-active        : #{$darkest};
}