@use "sass:math";
@use "sass:map";
@use "../variables" as *;
@use "../maps" as *;
@use "../../util/scss/add-rules.scss" as *;
@use "../../util/scss/calc.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-select(
   $name: "select",
   $state-style-map: $cx-std-field-state-style-map,
   $placeholder: $cx-input-placeholder,
   $empty-text: $cx-empty-text,
   $width: $cx-default-input-width,
   $left-icon-state-style-map: $cx-input-left-icon-state-style-map,
   $clear-state-style-map: $cx-clear-state-style-map,
   $tool-state-style-map: $cx-input-right-icon-state-style-map,
   $icon-size: $cx-default-input-icon-size,
   $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} {
      @include cxb-field($besm, $state-style-map: $state-style-map, $width: $width, $input: true);

      .#{$element}#{$name}-left-icon {
         pointer-events: none;
         @include cxe-field-button($besm, $left-icon-state-style-map);
      }
   }

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

   .#{$element}#{$name}-select {
      @include cxe-field-input(
         $besm,
         $state-style-map,
         $placeholder: $placeholder,
         $overrides: (
            padding: $cx-default-input-padding-top
               calc(#{$cx-default-input-padding-right} + #{$cx-default-clear-size} - #{$cx-default-input-padding-right})
               $cx-default-input-padding-bottom $cx-default-input-padding-left,
            -webkit-appearance: none,
            -moz-appearance: none,
            -ms-appearance: none,
            appearance: none
         )
      );

      .#{$state}icon > & {
         padding-left: cx-calc(cx-top($padding), $cx-default-input-left-tool-size, $cx-default-input-left-tool-spacing);
      }

      .#{$state}empty > & {
         @include cx-add-rules($placeholder);
      }

      &::-ms-expand {
         display: none;
         margin: 0;
         padding: 0;
      }

      option {
         background-color: $cx-default-dropdown-background-color;
         color: cx-get-state-rule($state-style-map, default, color);
      }
   }

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

   .#{$element}#{$name}-placeholder {
      @include cx-add-rules($placeholder);
   }

   .#{$element}#{$name}-tool {
      pointer-events: none; //cannot call open-dropdown on native element
      @include cxe-field-button($besm, $tool-state-style-map);

      .#{$state}disabled > & {
         border-width: 0;
         @include cx-add-state-rules($state-style-map, disabled);
      }
      .#{$state}focus > & {
         @include cx-add-state-rules($tool-state-style-map, focus);
      }
   }

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

@if (cx-should-include("cx/widgets/Select")) {
   @include cx-select;
}