@use "sass:map";
@use "../../util/scss/include.scss" as *;
@use "../../util/scss/defaults.scss" as *;
@use "../../util/scss/clockwise.scss" as *;
@use "../../util/scss/calc.scss" as *;
@use "../box.scss" as *;
@use "../Button.variables.scss" as *;
@use "./Field.variables.scss" as *;

// Label
$cx-default-label-padding: $cx-default-box-padding 0 !default;
$cx-default-label-font-size: $cx-default-box-font-size !default;
$cx-default-label-font-family: $cx-default-box-font-family !default;
$cx-default-label-font-weight: normal !default;
$cx-default-label-line-height: $cx-default-box-line-height !default;
$cx-default-label-color: null !default;
$cx-default-label-asterisk-color: #a80000 !default;

// DATE TIME PICKER
$cx-default-datetimepicker-font-size: $cx-default-font-size !default;
$cx-default-datetimepicker-background-color: #fff !default;
$cx-default-datetimepicker-border-width: 1px !default;
$cx-default-datetimepicker-border-radius: 0 !default;
$cx-default-datetimepicker-border-color: #d3d3d3 !default;
$cx-default-datetimepicker-padding: 0 5px !default;

// wheel
$cx-default-wheel-clip-background-color: #fff !default;
$cx-default-wheel-clip-border-width: 1px !default;
$cx-default-wheel-clip-border-radius: 0 !default;
$cx-default-wheel-clip-border-color: #d3d3d3 !default;
$cx-default-wheel-option-padding: 5px 15px !default;

$cx-wheel-selection-state-style-map: (
   default: (
      border-width: 2px 0 2px 0,
      border-style: solid,
      border-color: #9bc8ff,
      background-color: rgba(#9bc8ff, 0.1),
   ),
   active: (
      border-color: #3c7eff,
      background: rgba(#3c7eff, 0.1),
   ),
) !default;

// COLORFIELD
$cx-default-colorfield-font-family: "Consolas", monospace !default;

// MONTHPICKER
@forward "./MonthPicker.variables.scss";

// SLIDER
$cx-default-slider-axis-size: 8px !default;
$cx-default-slider-axis-background-color: rgba(128, 128, 128, 0.2) !default;
$cx-default-slider-range-background-color: #98d4ff !default;

// handle
$cx-default-slider-handle-size: 18px !default;
$cx-default-slider-handle-background-color: rgb(235, 235, 235) !default;
$cx-default-slider-handle-border-width: 1px !default;
$cx-default-slider-handle-border-color: rgb(204, 204, 204) !default;
$cx-default-slider-handle-border-radius: 50% !default;
$cx-default-slider-handle-box-shadow: 0 0 3px rgba(128, 128, 128, 0.3) !default;

// SWITCH
$cx-default-switch-axis-background-color: $cx-default-slider-axis-background-color !default;
$cx-default-switch-range-background-color: #87cc8a !default;
$cx-default-switch-axis-size: 20px !default;
$cx-default-switch-width: 32px !default;

$cx-default-switch-handle-background-color: $cx-default-slider-handle-background-color !default;
$cx-default-switch-handle-border-width: $cx-default-slider-handle-border-width !default;
$cx-default-switch-handle-border-color: $cx-default-slider-handle-border-color !default;
$cx-default-switch-handle-border-radius: $cx-default-slider-handle-border-radius !default;
$cx-default-switch-handle-box-shadow: $cx-default-slider-handle-box-shadow !default;
$cx-default-switch-handle-size: 18px !default;

// TEXTAREA
$cx-default-textarea-width: 300px !default;

// LOOKUPFIELD TAG
$cx-default-input-tag-spacing: 3px !default;
$cx-default-input-tag-font-size: null !default;
$cx-default-input-tag-background-color: #eee !default;
$cx-default-input-tag-border-radius: $cx-default-border-radius !default;
$cx-default-input-tag-border-width: $cx-default-button-border-width !default;
$cx-default-input-tag-border-color: $cx-default-button-border-color !default;
$cx-default-input-tag-padding: cx-calc($cx-default-input-padding-top, -$cx-default-input-tag-spacing) !default;

// Note: Field.variables.scss is @use'd above, not @forward'd here
// to avoid "module already loaded" errors with @forward...with() configuration
@forward "./Calendar.variables.scss";
@forward "./Checkbox.variables.scss";
@forward "./Radio.variables.scss";
@forward "./ColorPicker.variables.scss";

@include cx-register-dependencies(
   (
      "cx/widgets/Field": "cx/widgets/Label" "cx/widgets/Tooltip" "cx/widgets/ValidationError" "cx/widgets/HelpText",
      "cx/widgets/DateTimeField": "cx/widgets/Field" "cx/widgets/DateTimePicker" "cx/widgets/Calendar"
         "cx/widgets/Dropdown",
      "cx/widgets/DateField": "cx/widgets/DateTimeField",
      "cx/widgets/TimeField": "cx/widgets/DateTimeField",
      "cx/widgets/TextField": "cx/widgets/Field",
      "cx/widgets/NumberField": "cx/widgets/Field",
      "cx/widgets/MonthField": "cx/widgets/Field" "cx/widgets/MonthPicker" "cx/widgets/Dropdown",
      "cx/widgets/ColorField": "cx/widgets/Field" "cx/widgets/ColorPicker" "cx/widgets/Dropdown",
      "cx/widgets/LookupField": "cx/widgets/Field" "cx/widgets/Dropdown" "cx/widgets/List",
      "cx/widgets/Select": "cx/widgets/Field",
      "cx/widgets/Slider": "cx/widgets/Field",
      "cx/widgets/Switch": "cx/widgets/Field",
   )
);