/**
Customize: Button customize colors
 */

@if (get("customize.status")) {
  @if (get("extend-colors")) {
    #{get("selector")} {
      @extend %customize;
    }
  }

  %button {
    @extend %customize-fill-secondary;

    @each $type in get("type") {
      &.#{$type}, &-#{$type} {
        @extend %customize-#{$type}-secondary;
      }

      @each $color, $value in get("color.list") {
        $selector: if($type==fill, "&.#{$color}", "&.#{$type}.#{$color}");
        #{$selector}, &-#{$type}-#{"" + $color} {
          @extend %customize-#{$type}-#{"" + $color} !optional;
        }
      }
    }
  }

  %input {
    @extend %input-customize, %input-customize-fill-basic !optional;
  }
}

%customize {
  @each $type in get("type") {
    @each $color, $value in get("color.list") {
      $selector: if($type==fill, ".#{$color}", ".#{$type}.#{$color}");
      #{$selector}, &-#{$type}-#{"" + $color} { // if type fill render just `color` class else render `outline.color` and `ghost.color` classes
        @if ($color == secondary or $color==basic or $color == gray) {
          color: var(get("customize.element.button.font.color"));
        }

        @if (index(get("color.semantic"), $color)) {
          color: if($type==fill, var(--white), var(--#{$color}));
        }

        @if $type == outline {
          border-color: if($color==light, rgba(var(--light-rgb), 0.5), var(#{get("customize.element.button.border.default")}));

          &:active, &:focus, &:hover {
            border-color: if($color==light, var(--light), var(#{get("customize.element.button.border.default")}));
          }
        }

        @if ($type==outline or $type==ghost) {
          @each $state in get("state.list") {
            &:#{$state} {
              background-color: rgba(var(--neutral-500-rgb), var(--ghost-#{$state}));
              color: if($color == basic or $color == secondary or $color == gray, get("customize.element.button.hover.font.color"), if($color == light, var(--white), var(--#{$color})));
            }
          }
        }
      }
    }
  }
}

/**
Customize: Input secondary and basic customize
 */
%input-customize {
  color: var(#{get("customize.element.input.font.color")});

  @each $type in get("type") {
    @each $color, $value in get("color.semantic") {
      $selector: if($type==fill, "&.#{$color}", "&.#{$type}.#{$color}");
      #{$selector}, &-#{$type}-#{"" + $color} {
        @if ($type==fill) {
          background-color: var(--basic);

          @each $state in get("state.list") {
            &:#{$state}, &-#{$state} {
              background-color: var(--basic-#{$state});
            }
          }
        }

        @if ($type!=ghost) {
          border-color: var(--#{$color});
          color: var(#{get("customize.element.input.font.color")});

          @each $state in get("state.list") {
            &:#{$state} {
              border-color: var(--#{$color}-hover);
            }
          }
        }

        @else {
          border-color: transparent;
        }
      }
    }

    @each $color, $value in get("color.state") {
      $selector: if($type==fill, "&.#{$color}", "&.#{$type}.#{$color}");
      #{$selector}, &-#{$type}-#{"" + $color} {
        $temp: secondary basic gray light;

        @if ($type==fill) {
          color: if(index($temp, $color), var(#{get("customize.element.input.font.color")}), var(--white));
          background-color: var(--#{$color}); // !important;

          @each $state in get("state.list") {
            &:#{$state} {
              background-color: var(--#{$color}-hover);
            }
          }
        }

        @else {
          background-color: transparent; // !important;
        }
      }
    }
  }
}
