.btn .badge {
  padding: 0;
  vertical-align: text-bottom;
  color: currentColor;
  background: transparent;
}

.btn.btn-radius-0 {
  border-radius: 0;
}

.btn.btn-circle {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: $spacing-md * 2;
  min-height: $spacing-md * 2;
  border-radius: 50%;
  .icon {
    margin: 0;
  }
}

.btn.btn-fix-width {
  display: inline-flex;
  justify-content: center;
  align-items: flex-start;
  flex-shrink: 0;
  padding-top: 10px;
  width: $spacing-md * 2;

  .icon {
    margin: 0;
  }

  &.btn-sm {
    width: $spacing;

    .icon {
      font-size: $font-size-icon-sm;
      height: $font-size-icon-sm;
    }
  }

  &.btn-lg {
    display: inline-flex;
    width: $spacing * 3;
  }
}

.btn.btn-form {
  height: $input-height;
  border: $border-width solid $input-border-color;
}

.btn.active {
  &:not(.btn-outline-primary)
  &:not(.btn-section-color) {
    color: $white;
    background-color: $link-color;
    border-color: $link-color;
    border-style: solid;

    @include hover-focus {
      background-color: $link-hover-color;
      border-color: $link-hover-color;
    }
  }
}

.btn-toolbar {
  &.toolbar-docked {
    .btn {
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
    }
  }

  &.btn-toolbar-icon {
    .btn {
      padding: 5px 5px;
      background-color: $body-bg;
      border-color: $btn-secondary-color;
      .icon {
        margin-right: 0;
        vertical-align: middle;
        color: $btn-icon-inactive-color;
      }
      &.active {
        background-color: $btn-icon-active-bgcolor;
        .icon {
          color: $btn-icon-active-color;
        }
      }
    }
  }
}

.header-actions {
  position: absolute;
  margin: 0;
  top: 0;
  left: 0;
  height: 100%;
  background-color: $white;

  .btn {
    height: 100%;
    border-radius: 0;
    border-color: $gray-lighter;
    border-width: 0 $border-width 0 0;

    &:first-child {
      border-radius: $border-radius 0 0 0;
    }

    &:last-child {
      border-radius: 0;
    }
  }

  &.right {
    margin: 0;
    right: 0;
    left: auto;

    .btn {
      border-width: 0 0 0 $border-width;

      &:first-child {
        border-radius: 0;
      }

      &:last-child {
        border-radius: 0 $border-radius 0 0;
      }
    }
  }
}

.btn-toggle {
  border-width: $border-width;
  border-color: $link-color;
  color: $link-color;

  &.active {
    background-color: $link-color;
    border-color: $link-color;
  }
}