@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/besm.scss" as *;
@use "../../util/scss/include.scss" as *;
@use "./Field.scss" as *;

@mixin cx-textarea(
   $name: "textarea",
   $state-style-map: $cx-textarea-state-style-map,
   $placeholder: $cx-input-placeholder,
   $empty-text: $cx-empty-text,
   $tool-state-style-map: $cx-input-right-icon-state-style-map,
   $icon-size: $cx-default-input-icon-size,
   $width: $cx-default-textarea-width,
   $besm: $cx-besm
) {
   $block: map.get($besm, block);
   $element: map.get($besm, element);
   $state: map.get($besm, state);
   $mod: map.get($besm, mod);

   .#{$block}#{$name} {
      line-height: 0;
      width: $width;
      @include cxb-field($besm, $state-style-map, $input: false);
   }

   .#{$element}#{$name}-input {
      width: 100%;
      height: 100%;
      @include cxe-field-input(
         $besm,
         $state-style-map,
         $placeholder: $placeholder,
         $input: false
      );
   }

   .#{$element}#{$name}-tool {
      @include cxe-field-button($besm, $tool-state-style-map);
   }

   .#{$element}#{$name}-icon {
      @include cxe-field-button-icon($besm, $icon-size);
   }

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

@if (cx-should-include("cx/widgets/TextArea")) {
   @include cx-textarea;
}