@forward "cx/src/maps";

@use "sass:color";
@use "sass:map";
@use "./variables" as *;
@use "cx/src/maps" as *;
@use "cx/src/util/scss/deep-merge" as *;
@use "cx/src/util/scss/add-rules" as *;
@use "cx/src/util/scss/calc" as *;

// BUTTON
$cx-button-state-style-map: cx-deep-map-merge(
   $cx-button-state-style-map,
   (
      hover: (
         background-color: cx-darken(
               $cx-theme-default-button-background-color,
               2%
            ),
         border-color: cx-darken($cx-theme-default-button-background-color, 2%),
         box-shadow: inset 0 -1px rgb(68, 68, 68),
      ),
      active: (
         background-color: cx-darken(
               $cx-theme-default-background-color-dark,
               1%
            ),
         border-color: cx-darken($cx-theme-default-background-color-dark, 1%),
         box-shadow: inset 0 -1px rgb(30, 30, 30),
      ),
      disabled: (
         color: rgba(255, 255, 255, 0.2),
         background-color: rgba(112, 112, 112, 0.15),
         border-color: transparent,
      ),
      focus: (
         box-shadow: 0 0 1px 1px $cx-theme-default-highlight-color,
      ),
   )
);

$cx-button-mods: cx-deep-map-merge(
   $cx-button-mods,
   (
      primary: (
         default: (
            color: cx-darken(white, 15%),
            background-color: $cx-theme-default-primary-button-background-color,
            border-color: transparent,
            box-shadow: inset 0 -1px
               cx-lighten($cx-theme-default-primary-button-background-color, 3%),
         ),
         disabled: (
            background-color: color.adjust(
                  $cx-theme-default-primary-button-background-color,
                  $alpha: -0.7
               ),
            border-color: transparent,
            color: color.adjust(white, $alpha: -0.4),
            box-shadow: none,
         ),
         hover: (
            background-color: cx-darken(
                  $cx-theme-default-primary-button-background-color,
                  3%
               ),
            border-color: transparent,
            box-shadow: inset 0 -1px
               cx-darken($cx-theme-default-primary-button-background-color, 1%),
         ),
         active: (
            background-color: cx-darken(
                  $cx-theme-default-primary-button-background-color,
                  8%
               ),
            border-color: transparent,
            box-shadow: inset 0 -1px
               cx-darken($cx-theme-default-primary-button-background-color, 8%),
         ),
      ),
      hollow: (
         hover: (
            background-color: rgba(
                  $cx-theme-default-background-color-dark,
                  0.12
               ),
            box-shadow: none,
            border-color: transparent,
         ),
         focus: (
            background-color: cx-darken($cx-theme-default-highlight-color, 8%),
            box-shadow: none,
            border-color: cx-darken($cx-theme-default-highlight-color, 8%),
         ),
         active: (
            background-color: $cx-theme-default-highlight-color,
            border-color: $cx-theme-default-highlight-color,
         ),
      ),
      danger: (
         default: (
            background-color: $cx-theme-default-danger-button-background-color,
            border-color: transparent,
            box-shadow: inset 0 -1px
               cx-lighten($cx-theme-default-danger-button-background-color, 1%),
         ),
         disabled: (
            background-color: color.adjust(
                  $cx-theme-default-danger-button-background-color,
                  $alpha: -0.7
               ),
            border-color: transparent,
            color: color.adjust(white, $alpha: -0.4),
            box-shadow: none,
         ),
         hover: (
            background-color: cx-darken(
                  $cx-theme-default-danger-button-background-color,
                  3%
               ),
            border-color: transparent,
            box-shadow: inset 0 -1px
               cx-darken($cx-theme-default-danger-button-background-color, 1%),
         ),
         active: (
            background-color: cx-darken(
                  $cx-theme-default-danger-button-background-color,
                  6%
               ),
            border-color: transparent,
            box-shadow: inset 0 -1px
               cx-darken($cx-theme-default-danger-button-background-color, 6%),
         ),
      ),
   )
);

// SECTION
$cx-section-mods: cx-deep-map-merge(
   $cx-section-mods,
   (
      card: (
         default: (
            background-color: $cx-theme-default-background-color,
            border-radius: $cx-default-border-radius + 1px,
         ),
      ),
      well: (
         default: (
            background-color: $cx-theme-default-background-color,
            border-radius: $cx-default-border-radius + 1px,
         ),
      ),
      warning: (
         default: (
            border-radius: $cx-default-border-radius + 1px,
         ),
      ),
      primary: (
         default: (
            border-radius: $cx-default-border-radius + 1px,
         ),
      ),
      success: (
         default: (
            border-radius: $cx-default-border-radius + 1px,
         ),
      ),
      error: (
         default: (
            border-radius: $cx-default-border-radius + 1px,
         ),
      ),
   )
);

// LIST ITEM
$cx-list-item: cx-deep-map-merge(
   $cx-list-item,
   (
      hover: (
         background-color: cx-darken($cx-theme-default-highlight-color, 12%),
      ),
      cursor: (
         background-color: cx-darken($cx-theme-default-highlight-color, 12%),
      ),
      selected: (
         background-color: cx-darken($cx-theme-default-highlight-color, 1%),
      ),
      selected-cursor: (
         background-color: cx-lighten($cx-theme-default-highlight-color, 4%),
      ),
   )
);

$cx-menu-list-item: $cx-list-item;

// TAB
$cx-tab-state-style-map: cx-deep-map-merge(
   $cx-tab-state-style-map,
   (
      hover: (
         text-decoration: none,
         background-color: $cx-theme-default-background-color-dark,
      ),
      cursor: (
         background-color: cx-darken($cx-theme-default-highlight-color, 12%),
         outline: none,
      ),
      selected: (
         background-color: cx-darken($cx-theme-default-highlight-color, 9%),
      ),
      selected-cursor: (
         background-color: $cx-theme-default-highlight-color,
      ),
      disabled: (
         background-color: transparent,
      ),
   )
);

$cx-tab-mods: cx-deep-map-merge(
   $cx-tab-mods,
   (
      classic: (
         selected: (
            background-color: cx-lighten(
                  $cx-theme-default-background-color-light,
                  2%
               ),
            border-color: cx-lighten(
                  $cx-theme-default-background-color-light,
                  2%
               ),
         ),
      ),
      line: (
         cursor: (
            border-color: cx-darken($cx-theme-default-highlight-color, 12%),
         ),
         selected: (
            border-color: cx-darken($cx-theme-default-highlight-color, 3%),
         ),
         selected-cursor: (
            border-color: $cx-theme-default-highlight-color,
         ),
      ),
   )
);

// FORM
$cx-input-state-style-map: cx-deep-map-merge(
   $cx-input-state-style-map,
   (
      focus: (
         border-color: $cx-theme-default-highlight-color,
         box-shadow: 0 0 2px $cx-theme-default-highlight-color,
      ),
      disabled: (
         background: cx-darken($cx-theme-default-border-color, 3%),
      ),
   )
);

$cx-std-field-state-style-map: cx-deep-map-merge($cx-input-state-style-map, ());

// CALENDAR
$cx-calendar-state-style-map: cx-deep-map-merge(
   $cx-calendar-state-style-map,
   (
      hover: (
         border-color: $cx-default-input-border-color,
      ),
      focus: (
         border-color: cx-get-state-rule(
               $cx-input-state-style-map,
               focus,
               border-color
            ),
         box-shadow: cx-get-state-rule(
               $cx-input-state-style-map,
               focus,
               box-shadow
            ),
      ),
   )
);

$cx-calendar-day-state-style-map: cx-deep-map-merge(
   $cx-calendar-day-state-style-map,
   (
      default: (
         border-width: 1px,
         border-style: solid,
         border-color: transparent,
      ),
      hover: (
         background-color: $cx-theme-default-background-color-dark,
      ),
      hover-focus: (
         background-color: cx-darken($cx-theme-default-highlight-color, 12%),
      ),
      selected: (
         background-color: cx-darken($cx-theme-default-highlight-color, 6%),
      ),
      selected-focus: (
         background-color: $cx-theme-default-highlight-color,
      ),
      today: (
         background-color: transparent,
         border-color: cx-darken($cx-theme-default-error-color, 10%),
      ),
      outside: (
         color: rgba(204, 204, 204, 0.3),
      ),
   )
);

// DATE TIME PICKER
$cx-wheel-selection-state-style-map: cx-deep-map-merge(
   $cx-wheel-selection-state-style-map,
   (
      default: (
         border-color: transparent,
         background-color: rgba($cx-theme-default-highlight-color, 0.4),
      ),
      active: (
         border-color: transparent,
         background-color: rgba($cx-theme-default-highlight-color-light, 0.5),
      ),
   )
);

// CHECKBOX
$cx-checkbox-state-style-map: cx-deep-map-merge(
   $cx-checkbox-state-style-map,
   (
      focus: (
         border-color: cx-get-state-rule(
               $cx-input-state-style-map,
               focus,
               border-color
            ),
         outline: cx-get-state-rule($cx-input-state-style-map, focus, outline),
         box-shadow: cx-get-state-rule(
               $cx-input-state-style-map,
               focus,
               box-shadow
            ),
      ),
      disabled: (
         background: cx-darken($cx-theme-default-border-color, 3%),
      ),
   )
);

// RADIO
$cx-radio-state-style-map: cx-deep-map-merge(
   $cx-radio-state-style-map,
   (
      focus: (
         border-color: cx-get-state-rule(
               $cx-input-state-style-map,
               focus,
               border-color
            ),
         outline: cx-get-state-rule($cx-input-state-style-map, focus, outline),
         box-shadow: cx-get-state-rule(
               $cx-input-state-style-map,
               focus,
               box-shadow
            ),
      ),
      disabled: (
         background: cx-darken($cx-theme-default-border-color, 3%),
      ),
   )
);

// TEXTAREA
$cx-textarea-state-style-map: cx-deep-map-merge($cx-input-state-style-map, ());

// SLIDER
$cx-slider-handle-styles: cx-deep-map-merge(
   $cx-slider-handle-styles,
   (
      default: (
         background-color: cx-lighten(
               $cx-theme-default-background-color-light,
               12%
            ),
         border-color: cx-lighten($cx-theme-default-background-color-light, 12%),
         box-shadow: none,
      ),
      hover: (
         background-color: cx-lighten(
               $cx-theme-default-background-color-light,
               8%
            ),
         box-shadow: none,
      ),
      focus: (),
      disabled: (),
      active: (
         background-color: cx-lighten(
               $cx-theme-default-background-color-light,
               6%
            ),
         border-color: cx-lighten($cx-theme-default-background-color-light, 10%),
      ),
   )
);

// WINDOW
$cx-window-state-style-map: cx-deep-map-merge(
   $cx-window-state-style-map,
   (
      default: (
         background-color: $cx-theme-default-background-color-light,
      ),
   )
);

$cx-window-header-state-style-map: cx-deep-map-merge(
   $cx-window-header-state-style-map,
   (
      default: (
         background-color: $cx-theme-default-background-color-dark,
         border-bottom: 1px solid $cx-theme-default-background-color-dark,
      ),
   )
);

$cx-window-body-state-style-map: cx-deep-map-merge(
   $cx-window-body-state-style-map,
   (
      default: (
         background: $cx-theme-default-background-color,
      ),
   )
);

$cx-window-footer-state-style-map: cx-deep-map-merge(
   $cx-window-footer-state-style-map,
   (
      default: (
         background: $cx-theme-default-background-color,
      ),
   )
);

// GLOBALS
$cx-element-style-map: cx-deep-map-merge(
   $cx-element-style-map,
   (
      html: (
         background-color: #222,
      ),
      a: (
         color: cx-darken(#9faed2, 4%),
      ),
   )
);