.x-btn-card-lg {
  @extend .btn,
          .x-card,
          .pl-sm-3,
          .flex-row,
          .align-items-center,
          .x-btn-inverted-primary;

  > .x-icon-container {
    @extend .x-icon-md;

    &:first-of-type {
      @extend .mr-2,
              .mx-sm-3;
    }
  }

  &.is-loading {
    @extend .position-relative;
    > *:not(.x-loader) {
      @extend .fade;
    }

    .x-loader {
      @extend .position-absolute;
      color: inherit!important;
      .x-icon {
        font-size: 1em; // Loader size based on btn size
      }
    }

  }

  @include media-breakpoint-up(sm) {
    font-size: $h4-font-size;
    > .x-icon-container {
      &:first-of-type {
          font-size: map_get($icon-sizes, lg);
      }
    }
  }
}