@mixin cx-colorfield(
   $name: 'colorfield',
   $state-style-map: $cx-std-field-state-style-map,
   $placeholder: $cx-input-placeholder,
   $empty-text: $cx-empty-text,
   $clear-state-style-map: $cx-clear-state-style-map,
   $left-icon-state-style-map: $cx-input-left-icon-state-style-map,
   $right-icon-state-style-map: $cx-input-right-icon-state-style-map,
   $width: $cx-default-input-width,
   $icon-size: $cx-default-icon-size,
   $besm: $cx-besm
) {
   $block: map-get($besm, block);
   $element: map-get($besm, element);
   $state: map-get($besm, state);

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

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

   .#{$element}#{$name}-input {
      @include cxe-field-input(
         $besm,
         $state-style-map,
         $placeholder: $placeholder,
         $overrides: (
            default: (
               font-family: $cx-default-colorfield-font-family,
               font-size: 11px,
               padding: cx-top($padding) cx-calc(cx-right($padding), $cx-default-clear-size) cx-bottom($padding) cx-calc(cx-left($padding), $cx-default-input-left-tool-size, $cx-default-input-left-tool-spacing)
            )
         )
      );
   }

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

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

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

      .#{$state}focus > & {
        @include cx-add-state-rules($right-icon-state-style-map, focus);
      }
      .#{$state}error > & {
        @include cx-add-state-rules($right-icon-state-style-map, error);
      }
   }

   .#{$element}#{$name}-left-icon {
      @include cxe-field-button($besm, cx-deep-map-merge($left-icon-state-style-map, (
         default: (
            cursor: pointer
         )
      )));

      @include cx-checker-background();
      box-sizing: border-box;
      opacity: 1;

      div {
         width: 100%;
         height: 100%;
      }
   }

   .#{$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/ColorField')) {
   @include cx-colorfield();
}