//
// Base Button styles

.btn {
  display: inline-block;
  font-family: $btn-font-family;
  font-weight: $btn-font-weight;
  line-height: $btn-line-height;
  color: $body-color;
  text-align: center;
  text-decoration: if($link-decoration == none, null, none);
  white-space: $btn-white-space;
  vertical-align: middle;
  cursor: if($enable-pointer-cursor-for-buttons, pointer, null);
  user-select: none;
  background-color: transparent;
  border: $btn-border-width solid transparent;
  @include button-size($btn-padding-y, $btn-padding-x, $btn-font-size, $btn-border-radius);
  @include transition($btn-transition);

  &:hover {
    text-decoration: if($link-hover-decoration == underline, none, null);
  }

  &:focus,
  &.focus {
    outline: 0;
    box-shadow: $btn-focus-box-shadow;
  }

  &:active,
  &.active {
    @include box-shadow($btn-active-box-shadow);

    &:focus {
      @include box-shadow($btn-focus-box-shadow, $btn-active-box-shadow);
    }
  }

  &:disabled,
  &.disabled {
    pointer-events: none;
    opacity: $btn-disabled-opacity;
    @include box-shadow(none);
  }
}

// Primary & Secondary Button Styles

.btn {
  &-primary {
    background: $btn-primary-background;
    color: $btn-primary-text;
    border-color: $btn-primary-border-color;

    &:hover {
      background: $btn-primary-hover-background;
      color: $btn-primary-hover-text;
      border-color: $btn-primary-hover-border-color;
    }
  }

  &-secondary {
    background: $btn-secondary-background;
    color: $btn-secondary-text;
    border-color: $btn-secondary-border-color;

    &:hover {
      background: $btn-secondary-hover-background;
      color: $btn-secondary-hover-text;
      border-color: $btn-secondary-hover-border-color;
    }
  }

  &-delete {
    background: $btn-delete-background;
    color: $btn-delete-text;
    border-color: $btn-delete-border-color;

    &:hover {
      background: $btn-delete-hover-background;
      color: $btn-delete-hover-text;
      border-color: $btn-delete-hover-border-color;
    }
  }

  &-delete-link {
    background: $btn-delete-link-background;
    color: $btn-delete-link-text;
    border-color: $btn-delete-link-border-color;

    &:hover {
      background: $btn-delete-link-hover-background;
      color: $btn-delete-link-hover-text;
      border-color: $btn-delete-link-hover-border-color;
    }
  }
}