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

//VARIABLE MAPS
//LIST
$cx-list-item: cx-deep-map-merge(
   $cx-list-item,
   (
      default: (
         color: inherit,
         padding: round(1.5 * $cx-default-box-padding) 0,
         font-size: $cx-default-box-font-size - 1px,
      ),
      hover: (
         background-color: rgba(0, 0, 0, 0.01),
      ),
      cursor: (
         background-color: rgba(0, 0, 0, 0.02),
      ),
      selected: (
         background-color: rgba(0, 0, 0, 0.03),
         color: $cx-theme-primary-text-color,
      ),
      selected-hover: (
         background-color: rgba(0, 0, 0, 0.05),
         color: $cx-theme-primary-text-color,
      ),
      selected-cursor: (
         background-color: rgba(0, 0, 0, 0.05),
         color: $cx-theme-primary-text-color,
      ),
      disabled: (
         background-color: transparent,
      ),
   )
);

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

//BUTTON
$cx-button-state-style-map: cx-deep-map-merge(
   $cx-button-state-style-map,
   (
      default: (
         transition: all 0.1s,
         text-transform: uppercase,
      ),
      hover: (
         box-shadow: 0 1px 6px rgba(0, 0, 0, 0.3),
      ),
      focus: (
         box-shadow: $cx-theme-focus-box-shadow,
      ),
      active: (
         background-color: color.adjust($cx-default-button-background-color, $lightness: -4%),
         box-shadow: none,
         top: 0,
      ),
      disabled: (
         color: rgba(0, 0, 0, 0.26),
      ),
   )
);

// button mods
$cx-button-mods: cx-deep-map-merge(
   $cx-button-mods,
   (
      primary: (
         default: (
            transition: all 0.1s,
            border-color: color.adjust($cx-theme-primary-color, $lightness: -10%),
            background: $cx-theme-background-gradient,
         ),
         hover: (),
         focus: (),
         active: (
            background-color: color.adjust($cx-theme-primary-color, $lightness: -9%),
            box-shadow: none,
            background: linear-gradient(
                  to top right,
                  color.adjust($cx-theme-primary-color-dark, $lightness: -8%),
                  color.adjust($cx-theme-primary-color, $lightness: -8%)
               ),
            top: 0,
         ),
         disabled: (
            box-shadow: none,
            border-color: transparent,
            color: rgba(255, 255, 255, 0.45),
            background-color: rgba($cx-theme-primary-color, 0.5),
         ),
      ),
      rounded: (
         default: (
            border-radius: 999px,
         ),
      ),
      danger: (
         default: (
            transition: all 0.1s,
            background: linear-gradient(to top right, $cx-theme-danger-color-dark, $cx-theme-danger-color),
         ),
         hover: (),
         focus: (
            background-color: color.adjust($cx-theme-danger-color, $lightness: -10%),
         ),
         active: (
            background-color: color.adjust($cx-theme-danger-color, $lightness: -9%),
            background: linear-gradient(
                  to top right,
                  color.adjust($cx-theme-danger-color-dark, $lightness: -10%),
                  color.adjust($cx-theme-danger-color, $lightness: -10%)
               ),
            box-shadow: none,
            top: 0,
         ),
         disabled: (
            box-shadow: none,
            border-color: transparent,
            color: rgba(255, 255, 255, 0.45),
         ),
      ),
      flat-primary: (
         default: (
            color: $cx-theme-primary-text-color,
            background-color: transparent,
            border-color: transparent,
            box-shadow: none,
         ),
         hover: map.merge(
               map.get($cx-list-item, hover),
               (
                  box-shadow: none,
                  border-color: transparent,
               )
            ),
         focus: (
            background-color: color.adjust($cx-theme-default-background-color, $lightness: -8%),
            box-shadow: none,
         ),
         active: (
            background-color: rgba(153, 153, 153, 0.25),
         ),
         disabled: (
            color: rgba(0, 0, 0, 0.26),
         ),
      ),
      flat-accent: (
         default: (
            font-size: 14px,
            color: $cx-theme-accent-color,
            background-color: transparent,
            border-color: transparent,
            box-shadow: none,
         ),
         hover: map.merge(
               map.get($cx-list-item, hover),
               (
                  box-shadow: none,
                  border-color: transparent,
               )
            ),
         focus: (
            background-color: color.adjust($cx-theme-default-background-color, $lightness: -8%),
            box-shadow: none,
         ),
         active: (
            background-color: rgba(153, 153, 153, 0.25),
         ),
         disabled: (
            color: rgba(0, 0, 0, 0.26),
         ),
      ),
      hollow: (
         hover: (
            background-color: rgba(0, 0, 0, 0.03),
         ),
         focus: (
            background-color: rgba(0, 0, 0, 0.08),
            box-shadow: none,
         ),
         active: (
            background-color: rgba(0, 0, 0, 0.1),
         ),
         disabled: (
            color: rgba(0, 0, 0, 0.26),
         ),
      ),
      float: (
         default: (
            color: set-text-color($cx-theme-accent-color),
            background-color: $cx-theme-accent-color,
            border-radius: 50%,
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.45),
            padding: 0,
         ),
         hover: (
            background-color: $cx-theme-accent-color,
            box-shadow: 0 5px 8px rgba(0, 0, 0, 0.45),
         ),
         focus: (
            background-color: color.adjust($cx-theme-accent-color, $lightness: -4%),
         ),
         active: (
            background-color: color.adjust($cx-theme-accent-color, $lightness: 3%),
            box-shadow: 0 8px 12px rgba(0, 0, 0, 0.45),
         ),
         disabled: (
            box-shadow: none,
            border-color: transparent,
            color: rgba(255, 255, 255, 0.45),
            background-color: rgba($cx-theme-primary-color, 0.5),
         ),
      ),
      big: (
         default: (
            padding: $cx-default-padding-medium 2 * $cx-default-padding-medium,
         ),
      ),
   )
);

//TAB
$cx-tab-state-style-map: cx-deep-map-merge(
   $cx-tab-state-style-map,
   (
      default: (
         line-height: $cx-default-box-line-height,
         text-transform: uppercase,
      ),
      cursor: (
         background-color: rgba(0, 0, 0, 0.1),
         outline: none,
      ),
      selected: (
         background-color: $cx-theme-primary-color,
         color: #fff,
         font-weight: $cx-default-tab-font-weight,
      ),
      selected-cursor: (
         color: #fff,
         background-color: color.adjust($cx-theme-primary-color, $lightness: -5%),
      ),
      active: (
         color: $cx-theme-primary-color,
         background-color: $cx-default-tab-background-color,
      ),
      disabled: (
         background-color: $cx-default-tab-background-color,
         color: rgba(0, 0, 0, 0.26),
      ),
   )
);

// tab mods
$cx-tab-mods: cx-deep-map-merge(
   $cx-tab-mods,
   (
      classic: (
         default: (
            line-height: $cx-default-box-line-height - 2px,
            border-bottom-width: 0,
            border-left-width: 0,
            border-color: $cx-default-border-color,
            box-shadow: none,
            border-radius: 0,
         ),
         hover: (
            color: $cx-theme-primary-text-color,
            background-color: rgba(0, 0, 0, 0.02),
         ),
         cursor: (
            background-color: rgba(0, 0, 0, 0.03),
            color: $cx-theme-primary-text-color,
            outline: none,
         ),
         selected: (
            color: $cx-theme-primary-text-color,
            font-weight: $cx-default-tab-font-weight,
            background-color: #fff,
            border-top-color: $cx-theme-primary-color,
            box-shadow: inset 0 2px deepskyblue,
         ),
         selected-cursor: (
            color: $cx-theme-primary-text-color,
            background-color: transparent,
            border-color: rgba($cx-theme-primary-color-dark, 0.8) $cx-default-border-color transparent,
            box-shadow: inset 0 2px deepskyblue,
         ),
         active: (
            background-color: $cx-default-tab-background-color,
         ),
         disabled: (
            background-color: $cx-default-tab-background-color,
            color: rgba(0, 0, 0, 0.26),
         ),
      ),
      line: (
         default: (
            border-bottom-width: 3px,
            line-height: $cx-default-box-line-height - 4px,
            padding: $cx-default-box-padding 0,
            margin: 0 15px,
         ),
         selected: (
            box-shadow: none,
            color: $cx-theme-primary-text-color,
            font-weight: $cx-default-tab-font-weight,
            border-color: $cx-theme-primary-color,
         ),
         hover: (
            border-color: transparent,
            color: $cx-theme-primary-text-color,
         ),
         cursor: (
            color: $cx-default-tab-color,
            font-weight: $cx-default-tab-font-weight,
            border-color: rgba($cx-theme-primary-color, 0.3),
         ),
         selected-cursor: (
            color: $cx-theme-primary-text-color,
            font-weight: $cx-default-tab-font-weight,
            border-color: rgba($cx-theme-primary-color, 0.8),
         ),
      ),
      // If a tab is inside a dark-colored container, use mod="line-accent".
      line-accent: (
            default: (
               color: rgba(255, 255, 255, 0.7),
               border-left-color: transparent,
               border-right-color: transparent,
               border-top-color: transparent,
               border-left-width: 0,
               border-right-width: 0,
               border-bottom-width: 2px,
               border-top-width: 0,
               border-bottom-left-radius: 0,
               border-bottom-right-radius: 0,
               padding: (
                  $cx-default-box-padding + 1px,
               )
               (
                  2 * $cx-default-box-padding + 10px,
               )
               (
                  $cx-default-box-padding - 1px,
               ),
            ),
            hover: (
               border-color: rgba(255, 255, 255, 0.3),
               background-color: transparent,
            ),
            cursor: (
               background-color: transparent,
               border-color: rgba(255, 255, 255, 0.3),
               color: rgba(255, 255, 255, 0.8),
            ),
            selected: (
               color: #fff,
               background-color: transparent,
               border-color: $cx-theme-accent-color,
            ),
            selected-cursor: (
               border-color: color.adjust($cx-theme-accent-color, $lightness: 10%),
            ),
            disabled: (
               color: rgba(255, 255, 255, 0.3),
            ),
         ),
   )
);

//SECTION
$cx-section-mods: cx-deep-map-merge(
   $cx-section-mods,
   (
      card: (
         default: (
            background-color: white,
            border-radius: $cx-theme-default-section-border-radius,
            box-shadow: $cx-theme-default-section-box-shadow,
         ),
      ),
      primary: (
         default: (
            color: #fff,
            background-color: $cx-theme-primary-color,
            border-radius: $cx-default-border-radius,
            box-shadow: $cx-theme-default-section-box-shadow,
         ),
      ),
      success: (
         default: (
            box-shadow: $cx-theme-default-section-box-shadow,
         ),
      ),
      warning: (
         default: (
            box-shadow: $cx-theme-default-section-box-shadow,
         ),
      ),
      error: (
         default: (
            box-shadow: $cx-theme-default-section-box-shadow,
         ),
      ),
   )
);

//MENU
$cx-dropdown-styles: map-merge(
   $cx-dropdown-styles,
   (
      font-size: $cx-default-box-font-size - 1px,
      font-weight: 500,
      border-width: 0,
      border-style: solid,
      box-shadow: $cx-theme-box-shadow-elevated,
   )
);

$cx-menu-state-style-map: map-merge(
   $cx-menu-state-style-map,
   (
      default: (
         color: inherit,
      ),
   )
);

//WINDOW
$cx-window-state-style-map: cx-deep-map-merge(
   $cx-window-state-style-map,
   (
      default: (
         background: white,
         border-radius: $cx-default-border-radius,
         box-shadow: $cx-default-window-box-shadow,
      ),
   )
);

// header
$cx-window-header-state-style-map: cx-deep-map-merge(
   $cx-window-header-state-style-map,
   (
      default: (
         border-top-left-radius: $cx-default-border-radius,
         border-top-right-radius: $cx-default-border-radius,
      ),
      hover: (
         border-color: $cx-default-grid-header-border-color,
      ),
   )
);

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

// footer
$cx-window-footer-state-style-map: cx-deep-map-merge(
   $cx-window-footer-state-style-map,
   (
      default: (
         background: null,
         margin: 0 1.5rem,
         padding: 1rem 0,
         border-top: none,
      ),
   )
);

// window mods
$cx-window-mods: (
   alert: (
      frame: (
         font-size: 16px,
         color: $cx-theme-secondary-text-color,
      ),
      body: (
         padding: 24px 24px 20px,
         text-align: left,
      ),
      footer: (
         border-top: none,
         padding: 8px 0,
      ),
   ),
);

//TOAST
$cx-toast-mods: cx-deep-map-merge(
   $cx-toast-mods,
   (
      dark: (
         default: (
            color: #fff,
            background-color: rgb(51, 51, 51),
         ),
      ),
   )
);

//GRID
$cx-grid-header-state-style-map: cx-deep-map-merge(
   $cx-grid-header-state-style-map,
   (
      default: (
         text-transform: uppercase,
         background-color: $cx-default-grid-header-background-color,
      ),
      hover: (
         background-color: color.adjust($cx-default-grid-header-background-color, $lightness: -3%),
      ),
      sorted: (
         color: $cx-theme-primary-text-color,
         background-color: color.adjust($cx-default-grid-header-background-color, $lightness: -5%),
      ),
      sorted-hover: (
         background-color: color.adjust($cx-default-grid-header-background-color, $lightness: -5%),
      ),
   )
);

$cx-grid-data-state-style-map: cx-deep-map-merge(
   $cx-grid-data-state-style-map,
   (
      hover: (
         background-color: rgba($cx-theme-accent-color, 0.4),
         color: $cx-default-color,
      ),
      cursor: (
         background-color: rgba($cx-theme-accent-color, 0.5),
      ),
      selected: (
         background-color: rgba($cx-theme-primary-color, 0.2),
      ),
      selected-hover: (
         background-color: rgba(0, 0, 0, 0.05),
         color: $cx-theme-primary-text-color,
      ),
      selected-cursor: (
         background-color: rgba($cx-theme-primary-color, 0.25),
      ),
      disabled: (
         background-color: transparent,
      ),
   )
);

// pagination
$cx-grid-pagination-state-style-map: cx-deep-map-merge(
   $cx-list-item,
   (
      default: (
         border-color: transparent,
         border-radius: $cx-default-border-radius,
         padding: $cx-default-box-padding 2 * $cx-default-box-padding,
      ),
      active: (
         color: $cx-theme-primary-color-dark,
      ),
      cursor: (),
      selected-cursor: (
         box-shadow: $cx-theme-box-shadow-elevated,
         background-color: $cx-theme-primary-color,
         color: #fff,
      ),
      selected: (
         background-color: $cx-theme-primary-color,
         color: #fff,
      ),
   )
);

//FORM
// global inputs
$cx-input-state-style-map: cx-deep-map-merge(
   $cx-input-state-style-map,
   (
      focus: (
         border-color: rgba($cx-theme-primary-color, 0.9),
         box-shadow: none,
      ),
   )
);

// standard form field - textfield, numberfield, lookupfield,...
$cx-std-field-state-style-map: cx-deep-map-merge(
   $cx-input-state-style-map,
   (
      default: (
         box-shadow: $cx-theme-default-input-box-shadow,
         transition: $cx-theme-default-transition,
      ),
      hover: (),
      focus: (
         box-shadow: $cx-theme-focus-box-shadow,
         background-color: white,
      ),
      disabled: (
         color: rgba($cx-theme-secondary-text-color, 0.5),
         background-color: transparent,
         box-shadow: none,
         border-color: rgba($cx-default-input-border-color, 0.7),
      ),
      error: (
         background-color: #fbd7d8,
         border-color: $cx-theme-danger-color,
      ),
      error-focus: (
         border-color: $cx-theme-danger-color-dark,
         box-shadow: 0 0 2px 2px rgba($cx-theme-danger-color-dark, 0.5),
      ),
   )
);

// textarea
$cx-textarea-state-style-map: cx-deep-map-merge(
   $cx-std-field-state-style-map,
   (
      default: (
         border-color: $cx-default-input-border-color,
      ),
      focus: (
         box-shadow: 0px 1px 2px rgba($cx-theme-primary-color, 0.5),
      ),
      hover: (),
   )
);

// calendar
$cx-calendar-state-style-map: cx-deep-map-merge(
   $cx-calendar-state-style-map,
   (
      default: (
         padding: 5px,
      ),
      focus: (
         box-shadow: $cx-default-calendar-box-shadow,
         border-color: transparent,
      ),
   )
);

// calendar days
$cx-calendar-day-state-style-map: cx-deep-map-merge(
   $cx-calendar-day-state-style-map,
   (
      default: (
         height: 32px,
         line-height: 32px,
         width: 32px,
         font-weight: normal,
      ),
      hover-focus: (
         background-color: rgba($cx-theme-primary-color-light, 0.3),
      ),
      hover: (
         background-color: rgba($cx-theme-primary-color-light, 0.3),
      ),
      today: (
         background-color: rgba(color.adjust($cx-theme-accent-color, $saturation: -20%), 0.6),
      ),
      selected: (
         background-color: $cx-theme-primary-color,
         color: #fff,
         box-shadow: $cx-theme-box-shadow,
      ),
      selected-focus: (
         background-color: $cx-theme-primary-color-light,
         box-shadow: $cx-theme-box-shadow-elevated,
      ),
   )
);

// 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-primary-color, 0.3),
         border-radius: $cx-default-border-radius,
      ),
      active: (
         border-color: transparent,
         background-color: rgba($cx-theme-primary-color, 0.5),
      ),
   )
);

// checkbox
$cx-checkbox-state-style-map: cx-deep-map-merge(
   $cx-checkbox-state-style-map,
   (
      default: (
         opacity: 1,
      ),
      hover: (
         border-color: $cx-default-checkbox-border-color,
      ),
      focus: (
         box-shadow: none,
         border-color: $cx-theme-primary-color-light,
      ),
      checked: (
         background-color: $cx-theme-primary-color-light,
         border-color: $cx-theme-primary-color-light,
         color: white,
         opacity: 1,
      ),
      checked-focus: (
         background-color: $cx-theme-primary-color-dark,
         border-color: $cx-theme-primary-color-dark,
      ),
      disabled: (
         background-color: transparent,
         border-color: rgba($cx-default-checkbox-border-color, 0.4),
      ),
      disabled-checked: (
         background-color: rgba(0, 0, 0, 0.1),
         border-color: transparent,
      ),
   )
);

// radio
$cx-radio-state-style-map: cx-deep-map-merge(
   $cx-radio-state-style-map,
   (
      checked: (
         color: $cx-default-radio-color,
         border-color: $cx-default-radio-color,
      ),
      checked-focus: (
         color: $cx-theme-primary-text-color,
         border-color: $cx-theme-primary-color-dark,
      ),
      checked-hover: (
         color: $cx-theme-primary-text-color,
         border-color: $cx-theme-primary-color-dark,
      ),
      focus: (
         box-shadow: none,
         border-color: $cx-theme-primary-color-light,
      ),
      disabled: (
         background-color: transparent,
         border-color: rgba($cx-default-radio-border-color, 0.4),
      ),
      disabled-checked: (
         color: rgba(0, 0, 0, 0.26),
         border-color: rgba(0, 0, 0, 0.1),
      ),
   )
);

// lookupfield tag
$cx-input-tag-state-style-map: cx-deep-map-merge(
   $cx-input-tag-state-style-map,
   (
      default: (
         border-color: color.adjust($cx-default-input-tag-background-color, $lightness: -10%),
         border-radius: $cx-default-border-radius,
         border-width: 1px,
         border-style: solid,
      ),
      hover: (
         background-color: color.adjust($cx-default-input-tag-background-color, $lightness: -10%),
      ),
   )
);

// slider
$cx-slider-handle-styles: cx-deep-map-merge(
   $cx-slider-handle-styles,
   (
      hover: (
         box-shadow: $cx-default-slider-handle-box-shadow,
         background-color: color.adjust($cx-default-slider-handle-background-color, $lightness: 5%),
      ),
      active: (
         background-color: $cx-theme-primary-color-dark,
         border-color: $cx-theme-primary-color-dark,
      ),
      focus: (
         box-shadow: $cx-theme-box-shadow-elevated,
         background-color: $cx-theme-primary-color-dark,
      ),
   )
);

// switch
$cx-switch-handle-styles: cx-deep-map-merge(
   $cx-switch-handle-styles,
   (
      default: (
         box-shadow: none,
      ),
      hover: (
         box-shadow: $cx-theme-box-shadow,
      ),
      active: (
         background-color: #e0e0e0,
         border-color: transparent,
      ),
      focus: (
         box-shadow: $cx-theme-box-shadow-elevated,
         border-color: transparent,
      ),
      on: (
         background-color: $cx-theme-default-background-color,
         border-color: transparent,
      ),
      on-active: (
         background-color: color.adjust($cx-theme-primary-color-light, $lightness: 20%),
      ),
   )
);

// clear icon
$cx-clear-state-style-map: cx-deep-map-merge(
   $cx-clear-state-style-map,
   (
      hover: (
         color: color.adjust($cx-default-color, $lightness: -5%),
         background-color: transparent,
      ),
      focus: (
         color: $cx-theme-primary-color,
      ),
      error: (
         color: $cx-default-color,
         opacity: 0.6,
      ),
   )
);

// right icon
$cx-input-right-icon-state-style-map: cx-deep-map-merge(
   $cx-input-right-icon-state-style-map,
   (
      default: (
         color: $cx-theme-secondary-text-color,
         opacity: 1,
      ),
      focus: (
         color: $cx-theme-primary-color,
      ),
      error: (
         color: $cx-default-color,
         opacity: 0.6,
      ),
   )
);

// left icon
$cx-input-left-icon-state-style-map: cx-deep-map-merge(
   $cx-input-left-icon-state-style-map,
   (
      focus: (
         color: $cx-theme-primary-color,
         opacity: 1,
      ),
      error: (
         color: $cx-default-color,
         opacity: 0.6,
      ),
   )
);

//TOAST
$cx-toast-mods: cx-deep-map-merge(
   $cx-toast-mods,
   (
      primary: (
         default: (
            color: #fff,
            background-color: $cx-theme-primary-color,
         ),
      ),
   )
);

//GLOBALS
$cx-element-style-map: cx-deep-map-merge(
   $cx-element-style-map,
   (
      html: (
         background-color: #fafafa,
      ),
      h1: (
         font-weight: 400,
         color: $cx-default-color,
      ),
      h2: (
         font-weight: 400,
         color: $cx-default-color,
      ),
      h3: (
         font-weight: 400,
         color: $cx-default-color,
      ),
      h4: (
         font-weight: 400,
         color: $cx-default-color,
      ),
      h5: (
         font-weight: 400,
         color: $cx-default-color,
      ),
      h6: (
         font-weight: 400,
         color: $cx-default-color,
      ),
      a: (
         color: $cx-theme-primary-color-dark,
      ),
      p: (
         line-height: $cx-theme-default-paragraph-line-height,
      ),
   )
);