@mixin transition($transition...) {
  -moz-transition:    $transition;
  -o-transition:      $transition;
  -webkit-transition: $transition;
  transition:         $transition;
}

@mixin button-disabled() {
  &.is-disabled {
    background-color: $button-common-ghost-bg;
    color: $button-common-ghost-color;
    border: 0;
    cursor: initial;

    &:hover {
      background-color: $button-common-ghost-hover;
      border: 0;
      color: $button-common-ghost-color;
    }
  }
}

@mixin button-size($arr) {
  height: map-get($arr, 'height');
  padding: map-get($arr, 'padding');
  margin: map-get($arr, 'margin');
  font-size: map-get($arr, 'font-size');
}

@mixin get-button-colors($arr, $name) {
  $current: map-get($arr, $name);

  background-color: map-get($current, 'bg');
  color: map-get($current, 'color');
  border: map-get($current, 'border');
  transition: background-color 0.25s ease;

  &:hover {
    background-color: map-get($current, 'hover');
    color: map-get($current, 'color');
  }

  &:active {
    background-color: map-get($current, 'active');
  }
}

@mixin button-colors($type, $name) {
  @if $type == 'primary' {
    @include get-button-colors($button-primary, $name);
  } @else if $type == 'common' {
    @include get-button-colors($button-common, $name);
  }
}