@use "../functions";
@use "../variables";
@use "sass:color";

@mixin generate-button-background($color, $box-shadow) {
  background-color: $color;
  color: functions.apply-text-color($color, variables.$black, variables.$white);
  box-shadow: $box-shadow;
}

@mixin generate-button-states($color, $box-shadow-focus) {
  &:hover {
    background-color: color.scale($color, $lightness: 10%);
  }

  &:active {
    background-color: color.scale($color, $lightness: -10%);
  }

  &:focus {
    box-shadow: $box-shadow-focus;
  }

  &:disabled {
    background-color: rgba($color, 0.4);
    color: functions.apply-text-color(
      $color,
      variables.$black,
      variables.$white
    );
    pointer-events: none;
    box-shadow: none;
  }
}

@mixin generate-button-background-classes(
  $theme,
  $box-shadow,
  $box-shadow-focus
) {
  @each $var, $scale in $theme {
    @each $scale-var, $color in $scale {
      @if $scale-var == 500 {
        .nuitral-button-background-#{$var} {
          @include generate-button-background($color, $box-shadow);
          @include generate-button-states($color, $box-shadow-focus);
        }
      }
      .nuitral-button-background-#{$var}-#{$scale-var} {
        @include generate-button-background($color, $box-shadow);
        @include generate-button-states($color, $box-shadow-focus);
      }
    }
  }
}