// scss-lint:disable QualifyingElement

.btn {
  @include button-size($input-btn-padding-y, $input-btn-padding-x, $font-size-base, $input-btn-line-height, $btn-border-radius);
  @include transition($btn-transition);

  display: inline-block;
  font-weight: $btn-font-weight;
  line-height: $input-btn-line-height;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  user-select: none;
  border: $input-btn-border-width solid transparent;
  border-radius: 0;
  cursor: pointer;

  @include hover-focus {
    text-decoration: none;
  }

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

  // Disabled comes first so active can properly restyle
  &.disabled,
  &:disabled {
    @include box-shadow(none);

    cursor: disabled;
    opacity: 0.65;
  }

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

    background-image: none;
  }

  &.-block {
    display: block;
    width: 100%;

    + .btn-.block {
      margin-top: $btn-block-spacing-y;
    }
  }

  &.-primary {
    @include button-variant($white, theme-color("primary"),  theme-color("primary"));
  }
}

input[type="submit"],
input[type="reset"],
input[type="button"] {
  &.btn.-block {
    width: 100%;
  }
}