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

@mixin cxb-field(
   $besm,
   $state-style-map,
   $input: true,
   $box: false,
   $width: null
) {
   position: relative;
   display: inline-block;
   box-sizing: border-box;

   $line-height: cx-get-state-rule(
      $state-style-map,
      default,
      "line-height",
      1.2em
   );
   $padding: cx-get-state-rule($state-style-map, default, "padding", 0);
   $border-width: cx-get-state-rule(
      $state-style-map,
      default,
      "border-width",
      1px
   );

   @if $input {
      width: $width;
      line-height: 0;
      @if ($cx-use-box-line-height-fix) {
         height: cx-calc(
            $line-height,
            cx-top($padding),
            cx-bottom($padding),
            cx-top($border-width),
            cx-bottom($border-width)
         );
      }

      //font: cx-get-state-rule($state-style-map, default, 'font');
      //font-size: cx-get-state-rule($state-style-map, default, 'font-size');
      //
      //height: calc(#{$line-height} + #{cx-top($padding) + cx-bottom($padding)} + #{cx-top($border-width) + cx-bottom($border-width)});
   }

   @if ($box) {
      line-height: $line-height;
      padding: $padding;
      border-width: $border-width;
      border-style: solid;
      border-color: transparent;

      //other optional rules which could affect height
      font: cx-get-state-rule($state-style-map, default, "font");
      font-size: cx-get-state-rule($state-style-map, default, "font-size");
      height: cx-get-state-rule($state-style-map, default, "height");
   }

   $state: map.get($besm, state);

   &.#{$state}view-mode {
      line-height: $line-height;
      padding: $padding;
      border-width: $border-width;
      border-style: solid;
      border-color: transparent;
   }
}

@mixin cxe-field-input(
   $besm,
   $state-style-map,
   $overrides: null,
   $placeholder: null,
   $width: 100%,
   $input: true
) {
   $state: map.get($besm, state);

   $styles: cx-deep-map-merge($state-style-map, $overrides);

   $line-height: cx-get-state-rule($styles, default, "line-height", 1.2em);
   $padding: cx-get-state-rule($styles, default, "padding", 0);
   $border-width: cx-get-state-rule($styles, default, "border-width", 1px);

   box-sizing: border-box;

   @if $input {
      width: $width;

      @if ($cx-use-box-line-height-fix) {
         height: 100%;
         //100% line-height fix - inputs work better in all browser, especially in Firefox
         $styles: cx-deep-map-merge(
            $styles,
            (
               default: (
                     line-height: cx-calc(
                           $line-height,
                           cx-top($padding),
                           cx-bottom($padding)
                        ),
                     padding: 0 cx-right($padding) 0 cx-left($padding),
                  ),
            )
         );
      }
   }

   @include cx-add-state-rules($styles, default);

   &:hover {
      @include cx-add-state-rules($styles, hover);
   }

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

   @if $input {
      &:disabled {
         @include cx-add-state-rules($styles, disabled);
      }

      &:read-only {
         @include cx-add-state-rules($styles, read-only);
      }
   } @else {
      .#{$state}disabled > & {
         @include cx-add-state-rules($styles, disabled);
      }
   }

   .#{$state}error > & {
      @include cx-add-state-rules($styles, error);

      &:focus {
         @include cx-add-state-rules($styles, error-focus);
      }
   }

   @if $input {
      &::-webkit-input-placeholder {
         @include cx-add-rules($placeholder);
      }

      &::-moz-placeholder {
         @include cx-add-rules($placeholder);
      }

      &:-ms-input-placeholder {
         @include cx-add-rules($placeholder);
      }

      &::-ms-clear {
         width: 0;
         height: 0;
      }
   }
}

@mixin cxe-field-button($besm, $state-style-map) {
   display: block;
   position: absolute;

   @include cx-add-state-rules($state-style-map, default);

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

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

@mixin cxe-field-button-icon($besm, $size) {
   display: block;
   position: absolute;
   left: 50%;
   top: 50%;
   margin-top: cx-multiply($size, -0.5);
   margin-left: cx-multiply($size, -0.5);
   height: $size;
   width: $size;
   line-height: $size;
   text-align: center;
}

@mixin cxe-field-empty-text($empty-text) {
   @include cx-add-rules($empty-text);
}