@use 'sass:map';

@use 'mixins'as *;

@mixin button-set-types($list) {
  @each $item in $list {
    @include button-set-type($item)
  }
}

@mixin button-set-type($type) {
  #{getClassName((button))}#{getClassName((button, $type))} {
    @include set-css-val(button,
      (color: (color, neutral, 0),
        'border-color': (color, $type),
        'background-color': (color, $type),
        'hover-border-color': (color, $type),
        'hover-color': (color, neutral, 0),
        'hover-background-color': (color, $type, dark),
        'active-color': (color, $type, lightest),
        'active-border-color': (color, $type, dark),
        'active-background-color': (color, $type, dark),
        'disabled-color': (color, neutral, 0),
        'disabled-border-color': (color, $type, lighter),
        'disabled-background-color': (color, $type, lighter)));

    &[link],
    &[text] {

      @include set-css-val(button,
        (color: (color, $type), 'hover-color': (color, $type), 'active-color': (color, $type, lighter)));

    }

    &[plain] {
      @include set-css-val(button,
        (color: (color, $type),
          'background-color': (color, $type, lightest),
          'hover-color': (color, $type),
          'hover-background-color': (color, $type, lightest),
          'active-color': (color, $type),
          'active-background-color': (color, neutral, 0),
          'disabled-color': (color, $type, lighter),
          'disabled-background-color': (color, neutral, 0)));
    }


  }
}