.btn {
  @if $button-is-uppercase {
    text-transform: uppercase;
  }
  @if $is-desktop {
    &,&:focus, &:active {
      box-shadow: none !important;
      outline: none;
    }
  }
  border-radius: var(--leap-btn-radius);
  letter-spacing: .02rem;
  font-weight: var(--leap-btn-fontweight);
  font-size: var(--leap-btn-fontsize);
  height: var(--leap-btn-height);
  max-height: var(--leap-btn-height);
  line-height: 1;

  &:not(.btn-icon-only) {
    padding: var(--leap-btn-padding);
  }

  &:not(.btn-block):not(.btn-icon-only) {
    min-width: 7.5rem;

    @include media-breakpoint-down(sm) {
      width: 100%;
      & + & {
        margin-bottom: 0.5rem;
      }
    }
  }
}

.btn-default {
  @include button-outline-variant($primary, $primary, $primary-transparent, $primary);
  background-color: $white;
  border-color: var(--leap-btn-border-color);

  &:hover,
  &:focus {
    color: $primary;
    background-color: var(--leap-btn-hover-background-color);
    border-color: var(--leap-btn-hover-border-color);
  }
  &:active {
    color: $primary !important;
  }
}

.btn-link-danger {
  color: $danger;
  background-color: transparent;
  text-decoration: none;

  &:hover, 
  &:focus {
      text-decoration: underline;
      color: $danger;
  }
}


// Btn Icons variant
.btn-icon,
.btn-icon-only {
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-icon {
    .icon-container {
      font-size: 0.750rem;
        &:first-child { margin-right: 0.5rem; }
    }
}

.btn-icon-only {
  .icon-container {
    &:first-child { margin-right: 0; }
    &:last-child { margin-left: 0; }
  }
}

.btn-block {
  width: 100%;

  & + & {
    margin-top: 0.5rem;
  }
}