.x-empty {
  @extend %d-flex,
          %flex-column,
          %align-items-center,
          %justify-content-center,
          %h-100,
          %py-5;

  &.x-empty-sm {
    @extend %py-2,
    %h-auto;
  }

  &_icon {
    width: 14.250em;
    height: 8.875em;

    @include media-breakpoint-up(lg) {
      width: 28.438em;
      height: 17.688em;
    }

    .x-empty-sm & {
      @extend %px-0,
              %py-4,
              %h-auto;
        max-width: 19rem;
        max-height: 8rem;
    }
  }

  &_illustration {
    @extend %mb-5,
    %w-100,
            %x-flex-center;

    .x-empty-sm & {
      @extend %mb-0;
    }
  }

  &_message {
    @extend %d-flex,
            %align-items-center,
            %justify-content-center,
            %text-center,
            %flex-column;
  }

  .x-title,
  .x-text {
    @extend %text-grey;
  }

  .btn {
    @extend %mt-3;
  }
}

// svg whitelabel classes override
svg {
    .bg-stroke {
      @include custom-theme-color(primary, stroke);
    }
    .bg-primary-light {
      @include custom-theme-color(primary-transparent, fill);
    }
    .bg-primary-dark {
      fill: var(--custom-theme-primary-hover, theme-color(primary-darker)) !important;
    }
    .bg-primary {
      @include custom-theme-color(primary, fill);
    }
}