.x-btn-icon {
	@extend .d-flex,
					.align-items-center;
  .x-icon-container {
    &:first-child {
      @extend .mr-2;
    }
  }
}



.x-btn-icon-only {
  @extend .d-flex,
          .border-0,
          .align-items-center,
          .justify-content-center;

  // Remove Active box shadow for icon only btn
  @include x-active {
    @include box-shadow(none);
  }

  &.btn-xs {
    @extend .p-1;
  }

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

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

    &:first-child {
      @extend .mr-0;
    }
    &:last-child {
      @extend .ml-0;
    }
  }

}

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

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

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