@import 'support/color/default';
@import 'reg-comp-vars'; // RC common variables (used by 12+ products); RC uses root directly

:root {
  @each $name, $hexes in $color {
    @each $hex, $values in $hexes {
      @each $value in $values {
        --cc-color-#{$name}-#{$hex}: #{$value};
      }
    }
  }

  @each $color, $value in $theme-colors {
    --cc-color-#{$color}: #{$value};
  }

  --cc-color-white: #{$color-white};
  --cc-color-black: #{$color-black};

  // Defining the high-level stuff used throughout (we try to use these as much as possible below)
  --cc-global-text-color          : #1a1a1a;
  --cc-global-text-color-light    : var(--cc-color-gray-6);
  --cc-global-text-color-dark     : var(--cc-color-gray-9);
  --cc-global-text-color-lighter  : var(--cc-color-gray-5);
  --cc-global-bg-disabled         : var(--cc-color-gray-3);
  --cc-global-backdrop-dark       : rgba(0, 0, 0, 0.75);
  --cc-global-border-color        : var(--cc-color-gray-4);
  --cc-global-border-color-light  : var(--cc-color-gray-2);
  --cc-global-border-color-dark   : var(--cc-color-gray-5);


  // TYPOGRAPHY ---------------------------------
  --cc-font-link-color          : var(--cc-color-primary);
  --cc-font-link-color-hover    : var(--cc-color-primary-9);
  --cc-font-link-color-active   : var(--cc-font-link-color-hover);
  --cc-body-font-color          : var(--cc-global-text-color-dark);


  // ALERTS & TOASTS ----------------------------
  --cc-alert-color            : var(--cc-global-text-color-dark);
  --cc-alert-icon-color       : var(--cc-color-primary);
  --cc-alert-background       : var(--cc-color-primary-0);
  --cc-alert-primary-bg       : var(--cc-color-primary-0);
  --cc-alert-primary-color    : var(--cc-color-primary);
  --cc-alert-success-bg       : var(--cc-color-success-0);
  --cc-alert-success-color    : var(--cc-color-success);
  --cc-alert-warning-bg       : var(--cc-color-warning-0);
  --cc-alert-warning-color    : var(--cc-color-warning);
  --cc-alert-danger-bg        : var(--cc-color-danger-0);
  --cc-alert-danger-color     : var(--cc-color-danger-9);


  // Action Panel -------------------------------
  --cc-action-panel-header-bg              : var(--cc-color-white);
  --cc-action-panel-footer-bg              : var(--cc-color-white);
  --cc-action-panel-backdrop               : var(--cc-global-backdrop-dark);
  --cc-action-panel-border                 : 1px solid var(--cc-global-border-color-light);
  --cc-action-panel-header-color           : var(--cc-global-text-color-dark);
  --cc-action-panel-header-icon-color      : var(--cc-global-text-color-lighter);
  --cc-action-panel-header-icon-hover-color: var(--cc-color-gray-4);
  --cc-action-panel-footer-color           : var(--cc-color-accent);
  --cc-action-panel-footer-hover-color     : var(--cc-color-accent-8);
  --cc-action-panel-bg                     : var(--cc-color-gray-0);
  --cc-badge-close-bg-hover                : rgba(0, 0, 0, 0.3);


  // Buttons ------------------------------------
  --cc-btn-disabled-bg            : #cccccc;
  --cc-btn-default-c              : var(--cc-color-white);
  --cc-btn-link-bd                : 1px solid var(--cc-global-border-color);
  --cc-btn-disabled-bd            : 1px solid var(--cc-global-border-color-light);
  --cc-btn-disabled-c             : var(--cc-color-white);
  --cc-btn-link-hover-bg          : var(--cc-color-gray-0);
  --cc-btn-shadow-focus           : 0 0 2px 1px var(--cc-color-primary-7);
  --cc-btn-active-shadow          : none;
  --cc-btn-primary-bg             : var(--cc-color-primary);
  --cc-btn-primary-bg-hover       : var(--cc-color-primary-9);
  --cc-btn-primary-bg-active      : var(--cc-color-primary-9);
  --cc-btn-primary-border         : var(--cc-color-primary-9);
  --cc-btn-success-bg             : var(--cc-color-success);
  --cc-btn-success-bg-hover       : var(--cc-color-success-7);
  --cc-btn-success-bg-active      : var(--cc-color-success-9);
  --cc-btn-success-border         : var(--cc-color-success-9);
  --cc-btn-danger-bg              : var(--cc-color-danger);
  --cc-btn-danger-bg-hover        : var(--cc-color-danger-7);
  --cc-btn-danger-bg-active       : var(--cc-color-danger-9);
  --cc-btn-danger-border          : var(--cc-color-danger-9);
  --cc-btn-secondary-bg           : var(--cc-color-white);
  --cc-btn-secondary-bg-hover     : #eeeeee;
  --cc-btn-secondary-bg-active    : #eeeeee;
  --cc-btn-secondary-border       : var(--cc-color-primary-8);
  --cc-btn-secondary-color        : var(--cc-color-primary-8);


  // BREADCRUMBS --------------------------------
  --cc-breadcrumb-color               : var(--cc-color-primary);
  --cc-breadcrumb-color-active        : var(--cc-global-text-color-dark);
  --cc-breadcrumb-divider-color       : var(--cc-color-gray-3);


  // CARDS --------------------------------------
  --cc-card-bg                        : var(--cc-color-white);
  --cc-card-text-color                : #32363b;
  --cc-card-border                    : 1px solid #eaeef3;
  --cc-card-border-hover              : 1px solid var(--cc-global-border-color);
  --cc-card-header-color              : var(--cc-global-text-color-dark);
  --cc-card-header-icon-color         : var(--cc-global-text-color-lighter);
  --cc-card-header-icon-hover-color   : var(--cc-color-primary);
  --cc-card-footer-color              : var(--cc-color-accent);
  --cc-card-footer-hover-color        : var(--cc-color-accent-8);


  // CHECKBOX & RADIOS --------------------------
  --cc-checkbox-bd                      : 1px solid #999999;
  --cc-checkbox-bd-hover-color          : #5c5c5c;
  --cc-checkbox-bg-empty                : var(--cc-color-white);
  --cc-checkbox-bg-disabled             : #eeeeee;
  --cc-checkbox-bd-disabled             : #cccccc;
  --cc-checkbox-label-disabled-color    : var(--cc-global-text-color-lighter);
  --cc-checkbox-checked-color           : var(--cc-color-accent);
  --cc-checkbox-checked-border-color    : #999999;
  --cc-checkbox-bg-checked              : var(--cc-color-white);
  --cc-checkbox-bg-checked-disabled     : var(--cc-global-text-color-light);
  --cc-checkbox-checked-color-disabled  : var(--cc-color-gray-2);


  // DROPDOWN -----------------------------------
  --cc-dropdown-bg                 : var(--cc-color-white);
  --cc-dropdown-border             : 1px solid #cccccc;
  --cc-dropdown-bg-hover           : #eeeeee;
  --cc-dropdown-color              : #1a1a1a;
  --cc-dropdown-color-hover        : #1a1a1a;
  --cc-dropdown-icon-color         : #5c5c5c;
  --cc-dropdown-selected-color     : #1a1a1a;
  --cc-dropdown-selected-bg        : #eeeeee;


  // FORMS --------------------------------------
  --cc-control-background           : var(--cc-color-white);
  --cc-control-border               : 1px solid #cccccc;
  --cc-control-disabled-background  : #eeeeee;
  --cc-control-color                : var(--cc-global-text-color);
  --cc-control-placeholder-c        : #5c5c5c;
  --cc-control-placeholder-hover-c  : var(--cc-global-text-color-lighter);
  --cc-control-hover                : var(--cc-color-primary);
  --cc-control-hover-border         : var(--cc-color-gray-6);
  --cc-control-active               : var(--cc-color-primary);
  --cc-control-active-border        : #5c5c5c;
  --cc-control-icon-color           : #5c5c5c;
  --cc-control-disabled-border      : #cccccc;
  --cc-control-hint-color           : var(--cc-global-text-color-light);
  --cc-control-addon-background     : var(--cc-color-gray-0);
  --cc-select-box-shadow-focus      : 0 0 0 1px var(--cc-color-primary-4);


  // FOOTER -------------------------------------
  --cc-footer-border-top                   : 1px solid var(--cc-global-border-color-light);
  --cc-footer-color                        : var(--cc-global-text-color-dark);
  --cc-footer-color-link                   : var(--cc-color-accent);
  --cc-footer-bg-color                     : var(--cc-color-gray-1);
  --cc-footer-bg-inverse                   : #4c4b4c;
  --cc-footer-color-inverse                : var(--cc-color-white);
  --cc-footer-links-divider-color          : var(--cc-color-gray-6);
  --cc-footer-links-inverse-divider-color  : var(--cc-color-gray-1);


  // HEADER -------------------------------------
  --cc-header-bg                          : var(--cc-color-white);
  --cc-header-inverse-text-color-active   : var(--cc-color-white);
  --cc-header-inverse-icon-color-active   : var(--cc-color-accent);
  --cc-header-bg-hover                    : rgba(213, 213, 213, 0.35);
  --cc-header-borders                     : #cccccc;
  --cc-header-bottom-border               : var(--cc-header-borders);
  --cc-header-inverse-bg                  : var(--cc-color-black);
  --cc-header-inverse-bg-hover            : rgba(255, 255, 255, 0.23);
  --cc-header-text-color                  : #32363b;
  --cc-header-inverse-text-color          : rgba(255, 255, 255, .9);
  --cc-header-inverse-borders             : rgba(252, 252, 252, 0.35);
  --cc-header-inverse-pill-borders        : rgba(255, 255, 255, 0.09);
  --cc-header-inverse-pill-bg-hover       : rgb(43, 43, 43);


  // Loaders ------------------------------------
  --cc-skeleton-bg-color    : var(--cc-color-gray-3);
  --cc-loader-color         : var(--cc-color-accent);
  --cc-loader-bg-color      : var(--cc-color-white);


  // Media Object -------------------------------
  --cc-media-bg           : var(--cc-color-white);
  --cc-media-color        : var(--cc-global-text-color);
  --cc-media-border       : 1px solid var(--cc-global-border-color-light);
  --cc-media-stripe-bg    : var(--cc-color-gray-0);
  --cc-media-hover-bg     : var(--cc-color-gray-0);
  --cc-media-header-bg    : var(--cc-color-gray-0);
  --cc-media-action-color : var(--cc-global-text-color-light);


  // MODALS -------------------------------------
  --cc-modal-border                 : 1px solid #cccccc;
  --cc-modal-body-color             : var(--cc-global-text-color);
  --cc-modal-bg-color               : var(--cc-color-white);
  --cc-modal-backdrop-bg-color      : var(--cc-global-backdrop-dark);
  --cc-modal-close-color            : #707070;
  --cc-modal-title-color            : #d6002a;


  // NAV ---------------------------------------
  --cc-nav-color                 : #32363b;
  --cc-nav-color-disabled        : var(--cc-global-text-color-lighter);
  --cc-nav-pill-color            : #32363b;
  --cc-nav-pill-color-disabled   : #32363b;
  --cc-nav-color-hover           : var(--cc-global-text-color-dark);
  --cc-nav-color-active          : var(--cc-global-text-color-dark);
  --cc-nav-pill-color-hover      : var(--cc-global-text-color-dark);
  --cc-nav-pill-color-active     : var(--cc-global-text-color-dark);
  --cc-nav-pill-bg-hover         : var(--cc-color-gray-1);
  --cc-nav-pill-bg-active        : var(--cc-color-gray-1);
  --cc-nav-pill-bg-disabled      : var(--cc-color-gray-0);
  --cc-nav-pill-icon-color-active: var(--cc-color-accent);


  // SWITCHES -----------------------------------
  --cc-switch-border             : var(--cc-color-gray-8);
  --cc-switch-label-off          : var(--cc-global-text-color);
  --cc-switch-label-on           : var(--cc-color-white);
  --cc-switch-handle             : var(--cc-color-white);
  --cc-switch-disabled           : var(--cc-global-bg-disabled);
  --cc-switch-off-bg             : #cccccc;
  --cc-switch-on-bg              : var(--cc-color-primary);
  --cc-switch-handle-disabled    : var(--cc-color-gray-0);
  --cc-switch-disabled-checked-bg: var(--cc-global-text-color-light);


  // TOAST --------------------------------------
  --cc-toast-border             : 1px solid var(--cc-global-border-color-light);
  --cc-toast-background         : var(--cc-color-white);
  --cc-toast-color              : var(--cc-global-text-color-dark);
  --cc-toast-icon-color         : var(--cc-color-primary);
  --cc-toast-left-border-bg     : var(--cc-color-primary);
  --cc-toast-left-border-color  : var(--cc-color-primary-8);
  --cc-toast-close-color        : var(--cc-color-gray-6);


  // TOOLTIPS -----------------------------------
  --cc-tooltip-default-color   : #1a1a1a;
  --cc-tooltip-default-bd-color: #999999;
  --cc-tooltip-default-bg      : var(--cc-color-white);
  --cc-tooltip-invert-bg       : #1a1a1a;
  --cc-tooltip-invert-color    : var(--cc-color-white);


  // TABS ---------------------------------------
  --cc-tabs-color               : var(--cc-global-text-color);
  --cc-tabs-color-hover         : var(--cc-global-text-color);
  --cc-tabs-color-active        : var(--cc-global-text-color);
  --cc-tabs-border              : 1px solid #cccccc;
  --cc-tabs-border-hover        : #cccccc;
  --cc-tabs-border-active       : var(--cc-color-accent);
  --cc-tabs-bordered-bg-hover   : #eeeeee;
  --cc-tabs-bordered-bg-active  : #999999;
  --cc-tabs-color-disabled      : var(--cc-global-text-color-light);
  --cc-tabs-bordered-bg         : var(--cc-color-gray-0);


  // TABLES -------------------------------------
  --cc-table-background           : var(--cc-color-white);
  --cc-table-border-color         : #cccccc;
  --cc-table-row-hover            : #f8f8f8;
  --cc-table-row-stripe-hover     : #f8f8f8;
  --cc-table-stripe-bg            : #f8f8f8;
  --cc-table-head-bg              : #eeeeee;
  --cc-table-head-cell-hover      : #f8f8f8;
  --cc-table-head-color           : #32363b;
  --cc-table-head-border-color    : #cccccc;
  --cc-table-head-border-vertical : 1px solid #cccccc;
  --cc-table-foot-bg              : var(--cc-color-white);
  --cc-table-foot-color           :#32363b;


  // PAGINATION ---------------------------------
  --cc-pagination-item-color            : var(--cc-global-text-color-dark);
  --cc-pagination-item-current-bg       : var(--cc-color-gray-1);
  --cc-pagination-item-current-color    : var(--cc-color-primary);
  --cc-pagination-next-color            : var(--cc-color-primary);
  --cc-pagination-previous-color        : var(--cc-color-primary);
  --cc-pagination-bg-disabled           : var(--cc-color-gray-1);
  --cc-pagination-color-disabled        : var(--cc-global-text-color-light);
}