@use "sass:math";
@use "sass:map";
@use "../variables" as *;
@use "../maps" as *;
@use "../../util/scss/add-rules.scss" as *;
@use "../../util/scss/clockwise.scss" as *;
@use "../../util/scss/calc.scss" as *;
@use "../../util/scss/deep-merge.scss" as *;
@use "../../util/scss/besm.scss" as *;
@use "../../util/scss/include.scss" as *;
@use "./Field.scss" as *;

@mixin cx-checkbox(
   $name: "checkbox",
   $state-style-map: $cx-checkbox-state-style-map,
   $width: $cx-default-input-width,
   $empty-text: $cx-empty-text,
   $besm: $cx-besm,
   $size: $cx-default-checkbox-size
) {
   $block: map.get($besm, block);
   $element: map.get($besm, element);
   $state: map.get($besm, state);

   $padding: cx-get-state-rule($state-style-map, default, padding);
   $border-width: cx-get-state-rule($state-style-map, default, border-width);

   $outer-styles: cx-deep-map-merge(
      $state-style-map,
      (
         default: (
            border-width: $cx-default-box-border-width-top 0
               $cx-default-box-border-width-bottom 0,
         ),
      )
   );

   .#{$block}#{$name} {
      min-width: $size;
      @include cxb-field($besm, $outer-styles, $input: false, $box: true);
   }

   .#{$element}#{$name}-checkbox {
      padding: 0;
      margin: 0 !important;
      width: $size;
      height: $size;
      top: calc(50% - #{cx-multiply($size, 0.5)});
      left: 0;
      display: inline-block;
      position: absolute;
      //-webkit-appearance: none;

      &::-moz-focus-inner {
         border: 0;
         padding: 0;
         margin: -1px;
      }

      &:focus {
         box-shadow:
            inset 0 0 1px 1px rgba(77, 144, 254, 0.8),
            0 0 2px 2px rgba(77, 144, 254, 0.8);
         background: rgba(77, 144, 254, 0.8);
         outline: 0;
      }
   }

   .#{$element}#{$name}-text {
      display: inline-block;
      margin-left: $size;
      user-select: none;

      .#{$state}disabled > & {
         opacity: 0.5;
      }
   }

   .#{$element}#{$name}-baseline {
      user-select: none;
   }

   .#{$element}#{$name}-empty-text {
      @include cxe-field-empty-text($empty-text);
   }

   //non-native implementation
   .#{$element}#{$name}-input {
      width: $size;
      height: $size;
      top: calc(50% - #{cx-multiply($size, 0.5)});
      left: 0;
      display: inline-block;
      position: absolute;

      @include cxe-field-input(
         $besm,
         $state-style-map,
         $input: false,
         $overrides: (
            default: (
               padding: 0,
               margin: 0 !important,
            )
         )
      );

      &.#{$state}checked {
         @include cx-add-state-rules($state-style-map, checked);

         &:focus {
            @include cx-add-state-rules($state-style-map, checked-focus);
         }

         .#{$state}disabled > & {
            @include cx-add-state-rules($state-style-map, disabled-checked);
         }
      }
   }

   .#{$element}#{$name}-input-check {
      width: 100%;
      height: 100%;
      visibility: hidden;
      position: absolute;
      display: block;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;

      .#{$state}checked > & {
         visibility: visible;
      }
   }
}

@if (cx-should-include("cx/widgets/Checkbox")) {
   @include cx-checkbox();
}