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


.x-btn-group-toggle {
  @extend %btn-group-toggle;
  > .btn {
    @extend %btn-sm,
            .rounded,
            %px-2;

    line-height: 1;

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

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

.btn-group {
  > .btn {
    @extend .rounded;
    @include hover-focus {
      @extend .rounded;
    }
  }
}

.x-btn-group-adaptive {
  @extend %flex-md-row,
          %flex-column,
          %btn-group;
  display: flex;
  justify-content: center;

  > * {
    @extend %mb-2;

    @include media-breakpoint-up(md) {
      flex-grow: 1;
      max-width: 50%;
    }
    @include media-breakpoint-down(md) {
      width: 100%;
    }

    &:first-child {
      @extend %pr-md-1;
    }

    &:last-child {
      @extend %pl-md-1;
    }

    > * {
      width: 100%;
    }
  }
}