@use "sass:map";
@use "./lists" as *;
@use "./variables" as *;

$cx-button-state-style-map: (
   default: (
      background-color: $cx-default-button-background-color,
      box-shadow: $cx-default-button-box-shadow,
      border-color: $cx-default-button-border-color,
      border-width: $cx-default-button-border-width,
      border-radius: $cx-default-button-border-radius,
      border-style: solid,
      user-select: none,
      color: $cx-default-button-color,
      font-family: $cx-default-button-font-family,
      font-size: $cx-default-button-font-size,
      font-weight: $cx-default-button-font-weight,
      line-height: $cx-default-button-line-height,
      padding: $cx-default-button-padding,
      cursor: pointer,
      -webkit-appearance: none,
      -moz-appearance: none,
      appearance: none,
      white-space: nowrap,
      text-decoration: none,
   ),
   hover: (
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3),
      text-decoration: none,
   ),
   focus: (
      outline: none,
      box-shadow: 0 0 1px 1px rgba(77, 144, 254, 0.8),
   ),
   hover-focus: (),
   disabled: (
      color: gray,
      box-shadow: none,
      pointer-events: none,
   ),
   active: (
      top: 1px,
      box-shadow: none,
   ),
) !default;

$cx-button-mods: (
   primary: (
      default: (
         background-color: #1f99f8,
         border-color: #1e88e5,
         color: white,
      ),
      disabled: (
         background-color: rgba(31, 153, 248, 0.5),
         border-color: rgba(30, 136, 229, 0.1),
         color: rgba(255, 255, 255, 0.6),
      ),
      hover: (
         background-color: #1f99f8,
      ),
   ),
   danger: (
      default: (
         background-color: #d32f2f,
         border-color: #c62828,
         color: white,
      ),
      disabled: (
         background-color: rgba(211, 47, 47, 0.6),
         border-color: rgba(198, 40, 40, 0.1),
         color: rgba(255, 255, 255, 0.5),
      ),
      hover: (
         background-color: #d32f2f,
      ),
   ),
   hollow: (
      default: (
         background-color: transparent,
         border-color: transparent,
         color: inherit,
         box-shadow: none,
      ),
      hover: map.merge(
            map.get($cx-list-item, hover),
            (
               box-shadow: none,
               border-color: transparent,
            )
         ),
      focus: map.merge(
            map.get($cx-list-item, selected-cursor),
            (
               box-shadow: none,
               border-color: transparent,
            )
         ),
      disabled: (
         color: rgba(128, 128, 128, 0.5),
      ),
   ),
) !default;