.x-upload-group {
  @extend .d-flex,
          .justify-content-between,
          .flex-nowrap,
          .bg-white,
          .py-3,
          .px-4,
          .border;
  @include border-radius($input-border-radius-lg);

  .x-upload-label {
    @extend %font-size-sm,
            .mb-xl-0,
            .pr-2,
            .text-info;
  }
  .x-upload-prepend {
    @extend .d-block;
    @include size(5.750rem);
  }
  .x-upload-content {
    @extend .d-flex,
            .flex-column,
            .flex-xl-row,
            .flex-1,
            .pl-3,
            .justify-content-between,
            .align-items-xl-center;
  }
}

// Prepend / Append
.x-input-group-prepend {
  @extend .input-group-prepend;
}
.x-input-group-append {
  @extend .input-group-append;
}
.x-input-group-prepend,
.x-input-group-append {
  min-width: 2.250rem;

  > * {
    @extend .w-100;
  }

  .btn {
    @extend .btn-sm;
    @include hover-focus-active {
      z-index: $x-input-group-icon-zindex;
    }
  }

  .x-btn-icon-only {
    @extend .p-0;
  }
}

// Uploaded Multiple images preview
.x-upload-prepend,
.x-uploaded-img {
  @extend .overflow-hidden,
          .position-relative;
  @include transition(all 0.18s ease-in-out);
  @include border-radius($input-border-radius-lg);

  @include hover-focus {
    @include transition(all 0.18s ease-in-out);

    .x-btn-hidden,
    &.has-uploaded:before {
      @include invisible(visible);
      opacity: 1;
    }
  }

  &.has-uploaded:before {
    @extend .bg-dark-transparent,
            .position-absolute,
            .w-100,
            .h-100;
    content: '';
    z-index: 0;
    visibility: hidden;
    opacity: 0;
  }
}


.x-btn-delete {
  @extend .btn,
          .close,
          .x-no-focus,
          .position-absolute,
          .text-light,
          .py-0,
          .px-2;
  @extend %cursor-pointer;
  bottom: 0;
  left: 0;
  z-index: 2;

  &.x-btn-hidden {
    @include invisible(hidden);
    opacity: 0;
  }
}