@use 'sass:map';

@use 'common/var.scss'as *;
@use 'mixins/button'as *;
@use 'mixins/mixins'as *;


#{getClassName((button))} {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  color: #{getValName((button, color))};
  text-align: center;
  box-sizing: border-box;
  outline: none;
  transition: .1s;
  font-weight: #{getValName((button, font-weight))};
  user-select: none;
  vertical-align: middle;
  -webkit-appearance: none;
  background-color: #{getValName((button, background-color))};
  border: 1px solid;
  border-color: #{getValName((button, border-color))};
  padding: .6em 1em;
  height: 2.2em;
  font-size: #{getValName((button, font-size))};
  border-radius: #{getValName((button, border-radius))};

  &:hover,
  &:focus {
    color: #{getValName((button, hover, color))};
    border-color: #{getValName((button, hover, border-color))};
    background-color: #{getValName((button, hover, background-color))};
    outline: none;
  }

  &:active {
    color: #{getValName((button, active, color))};
    border-color: #{getValName((button, active, border-color))};
    background-color: #{getValName((button, active, background-color))};
    outline: none;
  }

  &:disabled {
    cursor: not-allowed;
    background-image: none;
    color: #{getValName((button, disabled, color))};
    border-color: #{getValName((button, disabled, border-color))};
    background-color: #{getValName((button, disabled, background-color))};
  }

  &[round] {
    @include set-css-val(button,
      ('border-radius': (border-radius, rounded)));
  }

  &[circle] {
    padding: .6em;
    @include set-css-val(button,
      ('border-radius': (border-radius, circle)));
  }

  &[text] {
    border-color: transparent;
    background-color: transparent;
    @include set-css-val(button,
      (color: (color, primary), 'hover-color': (color, primary), 'active-color': (color, primary, lighter)));
  }

  &[link] {
    border-color: transparent;
    background-color: transparent;
    padding: 0;
    height: auto;
    @include set-css-val(button,
      (color: (color, primary), 'hover-color': (color, primary), 'active-color': (color, primary, lighter)));

    &:hover {
      text-decoration: underline;
    }
  }

  >[class^=#{joinClassName((icon))}]+span {
    :empty {
      display: none;
    }

    margin-left: #{getValName((space, xs))};
  }
}

#{getClassName((button))} {
  @include set-css-val(button,
    ('font-size': (heading8),
      color: (color, primary),
      'border-color': (color, primary),
      'background-color': (color, neutral, 0),
      'border-radius': (border, radius, base),
      'hover-color': (color, primary),
      'hover-background-color': (color, primary, lightest),
      'active-color': (color, primary, light),
      'active-background-color': (color, primary, lightest),
      'disabled-color': (color, primary, lighter),
      'disabled-border-color': (color, primary, lighter),
      'disabled-background-color': (color, neutral, 0)))
}

#{getClassName((button, large))} {
  @include set-css-val(button,
    ('font-size': (heading7)));
}

#{getClassName((button, mini))} {
  @include set-css-val(button,
    ('font-size': (heading9)));
}



@include button-set-types($types);