[class="btn"] {
  @include button-variant(transparent, transparent, $default-clickable-bg, $default-clickable-bg-hover, $default-clickable-bg-hover, $default-clickable-border);
  color: $body-color;
}

// Min width so we don't have short buttons
.btn:not(.btn-icon-only, .btn-block, .btn-link) {
  min-width: 7.5rem;

  @media screen and (max-width: 320px) {
    min-width: 6.75rem;
  }
}

.btn {
  &:disabled {
    color: $btn-disabled-color;
  }
}

.btn-transparent {
  border-color: transparent;
  color: $white;

  &:hover, &:active, &:focus {
    color: $white;
    background-color: $btn-transparent-bg;
  }
}

%btn-default,
.btn-default {
  @include button-variant($btn-default-background, $btn-default-border, $btn-default-hover-background, $btn-default-hover-border, $btn-default-active-background, $btn-default-active-border);
  color: $btn-default-color;

  &:hover, &:focus, &:active {
    color: $btn-default-color;
  }
}

.btn-light {
  background-color: $btn-transparent-bg;
  color: $white;
  border-color: $btn-transparent-border-color;
  &:hover, &:active, &:focus {
    color: $white !important;
    background-color: $btn-transparent-hover-bg !important;
  }
}

.btn-outline-light {
  &:hover, &:active, &:focus {
    background-color: $btn-transparent-hover-bg !important;
    color: $white !important;
  }
}

@include mobile-device-only {
  // .btn:not(.btn-block) {
  //   width: 100%;
  //   display: block;
  //   margin-bottom: 1rem;
  // }
}

// Properly style [block] buttons on page_footer
@include mobile-device-only {
  .page_footer .col:not(:last-child) .btn-block {
    margin-bottom: 0.5rem;
  }
}