@import "~bootstrap/scss/button-group";


// Sizing
.btn-group-xs > .btn {
  @extend %btn-xs !optional;
}

.x-btn-group-toggle {
  @extend .btn-group-toggle;

  > .btn {
    @extend %btn-sm,
            %px-1;

    &.x-btn-icon-only {
      @extend %px-2;
      line-height: 1;
    }

    &:first-child {
      @extend .rounded-left;
    }
    &:last-child {
      @extend .rounded-right;
    }

    @include hover-focus-active {
      @include box-shadow(none);
    }

    .x-icon {
      @extend %x-icon-md;
    }
  }
}

.btn-group {
  .btn-primary:first-child:hover {
    z-index: unset;
  }
  .btn-primary:last-child,
  .dropdown-toggle-split {
    border-left: 1px solid rgba($white, $opacity-base);
  }
  .x-btn-icon-only {
    @extend .px-2;
    .x-btn-label {
      display: flex;
      align-items: center;
    }
  }
  .x-icon {
    @extend .x-icon-md;
  }

}

.dropdown-toggle-split {
  &.x-btn-default {
    border-left: 1px solid $border-color;
  }
  &.btn-sm {
    @extend .px-1
  }
}

.btn-group {
  .btn-group-left {
    .btn {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }
  }
}