@mixin _primary_base {
  display: inline-block;
  border: none;
  border-radius: 3px;
  padding: .375rem .75rem;
  background: $primary;
  color: $primary-contrast;
  
  & + & {
    margin-right: .5rem;
  }
  
  &:hover, &:focus, &:active, &.active {
    outline: 0;
    box-shadow: none;
    background: $primary-shade;
    color: $primary-contrast;
    text-decoration: none;
  }
  
  &:disabled, &.disabled {
    cursor: default;
    opacity: 1;
    background: rgba($primary, .5);
    color: rgba($primary-contrast, .5);
    box-shadow: none;
  }
}

@mixin _dark_base {
  @include _primary_base();
  background: $dark;
  color: $dark-contrast;
  
  &:hover, &:focus, &:active, &.active {
    background: $dark-shade;
  }
}

@mixin _success_base {
  @include _primary_base();
  background: $success;
  color: $success-contrast;
  
  &:hover, &:focus, &:active, &.active {
    background: $success-shade;
  }
}

@mixin _danger_base {
  @include _primary_base();
  background: $danger;
  color: $danger-contrast;
  
  &:hover, &:focus, &:active, &.active {
    background: $danger-shade;
  }
}

@mixin _outline_primary_base {
  display: inline-block;
  border-radius: 3px;
  padding: .375rem .75rem;
  background: none;
  border: 1px solid $primary;
  color: $primary;

  & + & {
    margin-right: .5rem;
  }
  
  &:hover, &:focus, &:active, &.active {
    outline: 0;
    box-shadow: none;
    background: none;
    border: 1px solid $primary-shade;
    color: $primary-shade;
    text-decoration: none;
  }

  &:disabled, &.disabled {
    cursor: default;
    opacity: 1;
    border: 1px solid rgba($primary, .5);
    color: rgba($primary, .5);
    box-shadow: none;
    background: none;
  }
}

@mixin _outline_dark_base {
  @include _outline_primary_base();
  color: $dark;
  border-color: $dark;
  
  &:hover, &:focus, &:active, &.active {
    color: $dark-shade;
    border-color: $dark-shade;
  }

  &:disabled, &.disabled {
    cursor: default;
    opacity: 1;
    border: 1px solid rgba($dark, .5);
    color: rgba($dark, .5);
    box-shadow: none;
    background: none;
  }
}

@mixin _outline_medium_base {
  @include _outline_primary_base();
  color: $medium;
  border-color: $medium;
  
  &:hover, &:focus, &:active, &.active {
    color: $medium-shade;
    border-color: $medium-shade;
  }

  &:disabled, &.disabled {
    cursor: default;
    opacity: 1;
    border: 1px solid rgba($medium, .5);
    color: rgba($medium, .5);
    box-shadow: none;
    background: none;
  }
}

@mixin _outline_danger_base {
  @include _outline_primary_base();
  color: $danger;
  border-color: $danger;
  
  &:hover, &:focus, &:active, &.active {
    color: $danger-shade;
    border-color: $danger-shade;
  }
}

.button-primary {
  @include _primary_base();

  &-sm {
    @include _primary_base();
    padding: .25rem .5rem;
    font-size: 11px;
  }

  &-lg {
    @include _primary_base();
    padding: .5rem 1.5rem;
  }
}

.button-dark {
  @include _dark_base();
}

.button-success {
  @include _success_base();
}

.button-danger {
  @include _danger_base();
}

.button-outline-primary {
  @include _outline_primary_base();

  &-sm {
    @include _outline_primary_base();
    padding: .25rem .5rem;
    font-size: 11px;
  }

  &-lg {
    @include _outline_primary_base();
    padding: .5rem 1.5rem;
  }
}

.button-outline-dark {
  @include _outline_dark_base();

  &-sm {
    @include _outline_dark_base();
    padding: .25rem .5rem;
    font-size: 11px;
  }

  &-lg {
    @include _outline_dark_base();
    padding: .5rem 1.5rem;
  }
}

.button-outline-medium {
  @include _outline_medium_base();

  &-sm {
    @include _outline_medium_base();
    padding: .25rem .5rem;
    font-size: 11px;
  }

  &-lg {
    @include _outline_medium_base();
    padding: .5rem 1.5rem;
  }
}

.button-outline-danger {
  @include _outline_danger_base();

  &-sm {
    @include _outline_danger_base();
    padding: .25rem .5rem;
    font-size: 11px;
  }

  &-lg {
    @include _outline_danger_base();
    padding: .5rem 1.5rem;
  }
}