%x-btn-icon,
.x-btn-icon {
	@extend %x-flex-a-center;
  .x-icon-container {
    &:first-child {
      @extend %mr-2;
    }
  }
  &.btn-block {
    justify-content: center;
  }
}


%x-btn-icon-only,
.x-btn-icon-only {
  @extend %x-flex-center;

  .x-icon-container {
    @extend %x-icon-sm;

    &:first-child {
      @extend %mr-0;
    }
    &:last-child {
      @extend %ml-0;
    }
  }
  &.x-icon-md {
    .x-icon {
      @extend %x-icon-md;
    }
  }
}

%x-btn-icon-only-lg,
.x-btn-icon-only-lg {
  @extend %x-btn-icon-only,
          %px-2;

  .x-icon-container {
    @extend %mx-1;
  }

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