// Lightning Design System 1.0.3
@mixin button {
  padding: {
    left: $spacing-medium;
    right: $spacing-medium;
  }
  text-align: center;
  vertical-align: middle;
}

@mixin button-base {
  border: $border-width-thin solid $color-border-button-default;

  &:hover,
  &:focus {
    background-color: $color-background-button-default-hover;
  }

  &:active {
    background-color: $color-background-button-default-active;
  }
}

@mixin button-brand {
  background-color: $color-background-button-brand;
  border: $border-width-thin solid $color-border-button-brand;
  color: $color-text-button-brand;

  &:link,
  &:visited,
  &:active {
    color: $color-text-button-brand;
  }

  &:hover,
  &:focus {
    background-color: $color-background-button-brand-hover;
    color: $color-text-button-brand-hover;
  }

  &:active {
    background-color: $color-background-button-brand-active;
  }
}

@mixin button-destructive { // @TODO - update when new tokens hit the repo
  background-color: #c23934; //$color-background-destructive;
  border: $border-width-thin solid #c23934; //$color-border-destructive;
  color: $color-text-inverse;

  &:link,
  &:visited,
  &:active {
    color: $color-text-inverse;
  }

  &:hover,
  &:focus {
    background-color: #a61a14; //$color-background-destructive-hover;
    color: $color-text-inverse;
  }

  &:active {
    background-color: #870500; //$color-background-button-destructive-active;
    border-color: #870500; //$color-border-destructive-active;
  }
}