@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 *;

// =============================================================================
// BUTTON
// =============================================================================
$cx-button-state-style-map: cx-deep-map-merge(
   $cx-button-state-style-map,
   (
      default: (
         transition: $cx-theme-default-transition,
         text-transform: uppercase,
         font-weight: $cx-default-button-font-weight,
      ),
      hover: (
         background-color: color.adjust($cx-default-button-background-color, $lightness: -3%),
         box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5),
      ),
      focus: (
         background-color: color.adjust($cx-default-button-background-color, $lightness: -5%),
         box-shadow: $cx-default-button-box-shadow,
      ),
      active: (
         background-color: color.adjust($cx-default-button-background-color, $lightness: -3%),
         box-shadow: $cx-theme-box-shadow-elevated,
         top: 0,
      ),
      disabled: (
         color: rgba(0, 0, 0, 0.26),
      ),
   )
);

$cx-button-mods: cx-deep-map-merge(
   $cx-button-mods,
   (
      primary: (
         default: (
            background-color: $cx-theme-primary-color,
            border-color: $cx-default-border-color,
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5),
         ),
         hover: (
            background-color: color.adjust($cx-theme-primary-color, $lightness: -3%),
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6),
         ),
         focus: (
            background-color: color.adjust($cx-theme-primary-color, $lightness: -8%),
         ),
         active: (
            background-color: color.adjust($cx-theme-primary-color, $lightness: -1%),
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.35),
            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),
         ),
      ),
      danger: (
         default: (
            background-color: $cx-theme-danger-color,
            border-color: $cx-default-border-color,
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5),
         ),
         hover: (
            background-color: color.adjust($cx-theme-danger-color, $lightness: -3%),
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6),
         ),
         focus: (
            background-color: color.adjust($cx-theme-danger-color, $lightness: -15%),
         ),
         active: (
            background-color: color.adjust($cx-theme-danger-color, $lightness: -4%),
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.35),
            top: 0,
         ),
         disabled: (
            box-shadow: none,
            border-color: transparent,
            color: rgba(255, 255, 255, 0.45),
         ),
      ),
      flat-primary: (
         default: (
            font-size: 14px,
            color: $cx-theme-primary-color-dark,
            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(153, 153, 153, 0.4),
         ),
         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,
            width: $cx-default-box-line-height + 2 * $cx-default-box-padding + 12px,
            height: $cx-default-box-line-height + 2 * $cx-default-box-padding + 12px,
         ),
         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),
         ),
      ),
   )
);

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

$cx-tab-mods: cx-deep-map-merge(
   $cx-tab-mods,
   (
      classic: (
         default: (
            color: rgba(255, 255, 255, 0.7),
            background-color: $cx-theme-primary-color,
            border-width: 0 0 2px,
            border-radius: 0,
            padding: ($cx-default-box-padding + 1px) (2 * $cx-default-box-padding + 10px) ($cx-default-box-padding - 1px),
         ),
         hover: (
            color: rgba(255, 255, 255, 0.8),
            background-color: color.adjust($cx-theme-primary-color, $lightness: -2%),
         ),
         cursor: (
            color: rgba(255, 255, 255, 0.85),
            border-color: rgba($cx-theme-accent-color, 0.7),
         ),
         selected: (
            color: #fff,
            background-color: $cx-theme-primary-color,
            border-color: $cx-theme-accent-color,
         ),
         selected-cursor: (
            color: #fff,
            background-color: $cx-theme-primary-color,
            border-color: color.adjust($cx-theme-accent-color, $lightness: 6%),
         ),
         active: (
            color: #fff,
            background-color: $cx-default-tab-background-color,
            border-color: $cx-theme-accent-color,
         ),
         disabled: (
            color: rgba(255, 255, 255, 0.3),
         ),
      ),
      line: (
         default: (
            color: rgba(0, 0, 0, 0.7),
            padding: ($cx-default-box-padding + 1px) (2 * $cx-default-box-padding + 10px) ($cx-default-box-padding - 1px),
         ),
         hover: (
            border-color: rgba(0, 0, 0, 0.06),
         ),
         selected: (
            color: $cx-theme-primary-color-light,
            border-color: $cx-theme-primary-color,
         ),
         selected-cursor: (
            border-color: color.adjust($cx-theme-primary-color, $lightness: 10%),
         ),
         disabled: (
            color: rgba(0, 0, 0, 0.26),
         ),
         cursor: (
            border-color: rgba(0, 0, 0, 0.13),
         ),
      ),
      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),
         ),
      ),
   )
);

// =============================================================================
// LIST
// =============================================================================
$cx-list-item: cx-deep-map-merge(
   $cx-list-item,
   (
      default: (
         color: inherit,
      ),
      hover: (
         background-color: rgba(0, 0, 0, 0.03),
      ),
      cursor: (
         background-color: rgba(0, 0, 0, 0.03),
      ),
      selected: (
         background-color: rgba(0, 0, 0, 0.07),
      ),
      selected-hover: (
         background-color: rgba(0, 0, 0, 0.1),
      ),
      selected-cursor: (
         background-color: rgba(0, 0, 0, 0.1),
      ),
      disabled: (
         background-color: transparent,
      ),
   )
);

// =============================================================================
// SECTION
// =============================================================================
$cx-section-mods: cx-deep-map-merge(
   $cx-section-mods,
   (
      card: (
         default: (
            background-color: white,
            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,
         ),
      ),
      warning: (
         default: (
            color: $cx-default-color,
            background-color: #ffc107,
            border-radius: $cx-default-border-radius,
            box-shadow: $cx-theme-default-section-box-shadow,
         ),
      ),
      success: (
         default: (
            color: #fff,
            background-color: #4caf50,
            border-radius: $cx-default-border-radius,
            box-shadow: $cx-theme-default-section-box-shadow,
         ),
      ),
      error: (
         default: (
            color: #fff,
            background-color: #f4511e,
            border-radius: $cx-default-border-radius,
            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,
      background-color: rgb(251, 251, 251),
      border-width: 0,
      border-style: solid,
      box-shadow: $cx-theme-box-shadow,
   )
);

$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,
      ),
   )
);

$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,
      ),
   )
);

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

$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,
      ),
   )
);

// =============================================================================
// GRID
// =============================================================================
$cx-grid-header-state-style-map: cx-deep-map-merge(
   $cx-grid-header-state-style-map,
   (
      hover: (
         color: color.adjust($cx-default-grid-header-color, $lightness: -10%),
         background-color: $cx-default-grid-header-background-color,
         border-color: $cx-default-grid-data-border-color,
      ),
      sorted: (
         color: $cx-default-color,
         background-color: color.adjust($cx-default-grid-header-background-color, $lightness: -2%),
      ),
      sorted-hover: (
         color: color.adjust($cx-default-grid-header-color, $lightness: -25%),
         background-color: color.adjust($cx-default-grid-header-background-color, $lightness: -3%),
      ),
   )
);

// pagination
$cx-grid-pagination-state-style-map: cx-deep-map-merge(
   $cx-list-item,
   (
      default: (
         border-radius: $cx-default-border-radius,
      ),
   )
);



// =============================================================================
// FORM
// =============================================================================
$cx-input-state-style-map: cx-deep-map-merge(
   $cx-input-state-style-map,
   (
      focus: (
         border-color: transparent,
         box-shadow: none,
      ),
   )
);

$cx-std-field-state-style-map: cx-deep-map-merge(
   $cx-input-state-style-map,
   (
      default: (
         padding: $cx-theme-input-padding,
         background-color: transparent,
         border-color: transparent transparent #dbdbdb,
         border-radius: 0,
      ),
      hover: (
         border-color: transparent transparent color.adjust(#dbdbdb, $lightness: -6%),
      ),
      focus: (
         border-color: transparent transparent $cx-theme-primary-color,
         transition: border-color 0.55s ease-in-out,
         box-shadow: none,
      ),
      disabled: (
         color: rgba($cx-theme-secondary-text-color, 0.5),
         background-color: transparent,
         border-style: dashed,
      ),
      error: (
         border-color: transparent transparent $cx-theme-danger-color,
      ),
      error-focus: (
         box-shadow: none,
      ),
   )
);

$cx-textarea-state-style-map: cx-deep-map-merge(
   $cx-std-field-state-style-map,
   (
      default: (
         border-color: transparent transparent #dbdbdb,
      ),
      focus: (
         background-color: rgba($cx-default-color, 0.015),
      ),
      hover: (
         background-color: rgba($cx-default-color, 0.009),
      ),
   )
);

// =============================================================================
// CALENDAR
// =============================================================================
$cx-calendar-state-style-map: cx-deep-map-merge(
   $cx-calendar-state-style-map,
   (
      focus: (
         background-color: #f7f7f7,
         box-shadow: $cx-default-calendar-box-shadow,
      ),
   )
);

$cx-calendar-day-state-style-map: cx-deep-map-merge(
   $cx-calendar-day-state-style-map,
   (
      default: (
         height: 32px,
         line-height: 32px,
         width: 32px,
      ),
      hover-focus: (
         background-color: rgba($cx-theme-primary-color, 0.3),
      ),
      hover: (
         background-color: rgba($cx-theme-primary-color, 0.3),
      ),
      today: (
         background-color: rgba($cx-theme-accent-color, 0.6),
      ),
      selected: (
         background-color: $cx-theme-primary-color,
         color: #fff,
      ),
      selected-focus: (
         background-color: $cx-theme-primary-color-dark,
      ),
   )
);

// =============================================================================
// 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-light, 0.2),
      ),
      active: (
         border-color: transparent,
         background-color: rgba($cx-theme-primary-color-light, 0.45),
      ),
   )
);

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

// =============================================================================
// RADIO
// =============================================================================
$cx-radio-state-style-map: cx-deep-map-merge(
   $cx-radio-state-style-map,
   (
      checked: (
         color: $cx-theme-default-radio-color,
         border-color: $cx-theme-default-radio-color,
      ),
      checked-focus: (
         // border-color: $cx-theme-default-radio-color
      ),
      checked-hover: (
         border-color: $cx-theme-default-radio-color,
      ),
      focus: (
         box-shadow: none,
         border-color: #dbdbdb,
      ),
      disabled: (
         background-color: transparent,
         border-color: rgba(0, 0, 0, 0.1),
      ),
      disabled-checked: (
         color: rgba(0, 0, 0, 0.26),
         border-color: rgba(0, 0, 0, 0.1),
      ),
   )
);

// =============================================================================
// SLIDER
// =============================================================================
$cx-slider-handle-styles: cx-deep-map-merge(
   $cx-slider-handle-styles,
   (
      default: (
         box-shadow: null,
      ),
      hover: (
         box-shadow: null,
      ),
      active: (
         background-color: $cx-theme-primary-color-dark,
      ),
      focus: (
         box-shadow: none,
         border-color: $cx-theme-primary-color-dark,
      ),
   )
);

// =============================================================================
// SWITCH
// =============================================================================
$cx-switch-handle-styles: cx-deep-map-merge(
   $cx-switch-handle-styles,
   (
      hover: (
         box-shadow: $cx-theme-box-shadow,
      ),
      active: (
         background-color: #e0e0e0,
         border-color: transparent,
      ),
      focus: (
         box-shadow: $cx-theme-box-shadow,
         border-color: transparent,
      ),
      on: (
         background-color: $cx-theme-primary-color,
         border-color: transparent,
      ),
      on-active: (
         background-color: $cx-theme-primary-color-dark,
      ),
   )
);

// =============================================================================
// CLEAR ICON
// =============================================================================
$cx-clear-state-style-map: cx-deep-map-merge(
   $cx-clear-state-style-map,
   (
      default: (
         right: 0,
      ),
      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,
         right: 0,
      ),
      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,
   (
      default: (
         left: 0,
      ),
      focus: (
         color: $cx-theme-primary-color,
         opacity: 1,
      ),
      error: (
         color: $cx-default-color,
         opacity: 0.6,
      ),
   )
);

// =============================================================================
// INPUT TAG (LookupField)
// =============================================================================
$cx-input-tag-state-style-map: cx-deep-map-merge(
   $cx-input-tag-state-style-map,
   (
      hover: (
         background-color: color.adjust($cx-default-input-tag-background-color, $lightness: -10%),
      ),
   )
);

// =============================================================================
// TOAST
// =============================================================================
$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,
      ),
   ),
);

$cx-toast-mods: cx-deep-map-merge(
   $cx-toast-mods,
   (
      dark: (
         default: (
            color: #fff,
            background-color: rgb(51, 51, 51),
         ),
      ),
      warning: (
         default: (
            color: $cx-default-color,
            background-color: #ffc107,
         ),
      ),
      primary: (
         default: (
            color: #fff,
            background-color: $cx-theme-primary-color,
         ),
      ),
      success: (
         default: (
            color: #fff,
            background-color: #4caf50,
         ),
      ),
      error: (
         default: (
            color: #fff,
            background-color: #f4511e,
         ),
      ),
   )
);

// =============================================================================
// GLOBALS
// =============================================================================
$cx-element-style-map: cx-deep-map-merge(
   $cx-element-style-map,
   (
      html: (
         background: #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,
      ),
      p: (
         line-height: $cx-theme-default-paragraph-line-height,
      ),
   )
);