$bg-hover-color: rgba(var(--custom-theme-primary-rgb, 14, 95, 227), 0.04);
$bg-active-color: var(--custom-theme-primary-transparent, theme-color('primary-transparent'));





.x-files {
  @extend %my-3;
}

.x-file {
  @extend %d-flex,
          %mb-3,
          %justify-content-start;
}

.x-file-prepend {
  @extend %mr-3;

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

    @include media-breakpoint-up(md) {
      font-size: map_get($icon-sizes, xl);
    }
  }

  .x-file-complex-sm & {
    @extend %mr-2;
  }
}


.x-profile {
  @extend %x-flex-centered,
          %text-center;

  .x-avatar {
    @extend %mb-3;
  }

  .x-title h6 {
    font-weight: $font-weight-medium;
  }
}


.x-file-content {
  @extend %align-items-center,
          %d-flex;
}


.x-profile-thumb {
  @extend %position-relative,
          %mb-3;
}

.x-pay-cell {
  display: none;

  .x-file-complex:hover &,
  .x-file-complex:hover & {
    @extend %d-flex;
  }
}


.x-file-complex {
  @extend %d-flex,
          %align-items-center,
          %position-relative,
          %py-2,
          %py-md-3,
          %py-xl-4,
          %pl-md-4,
          %pl-2,
          %pr-2,
          %border-bottom;

  @include transition(background-color 0.08s ease-out);

  &.x-file-complex-slim {
    @extend %pt-0,
            %pb-0,
            %pl-3,
            %pr-2;
  }

  &.x-file-complex-odd {
    background-color: theme-color("white");
  }

  &.x-file-complex-even {
    background-color: #F9F9FA;
  }

  &.x-file-complex-sm {
    @extend %pt-3,
            %pb-3,
            %pl-3,
            %pr-3;
  }

  &.x-file-complex-xs {
    @extend %pt-3,
            %pb-3,
            %pl-3,
            %pr-3;
  }

  &.x-file-complex-header {
    @extend %pt-3,
            %pb-3,
            %pl-3,
            %pr-3;
    background-color: theme-color("white");
  }

  &.x-show-btn-hover:not(:hover) .btn {
    display: none;
  }

  &:hover:not(.x-file-complex-header) {
    background-color: $bg-hover-color;
  }

  &:active:not(.x-file-complex-header),
  &.active:not(.x-file-complex-header) {
    background-color: $bg-active-color;
  }

  .btn-group--actions {
    @extend %align-self-start;
  }

  .x-file-prepend {
    @extend %align-self-center;

    .x-icon-container .x-icon {
      @include x-icon-sizing(x-icon-lg);

      @include media-breakpoint-up(md) {
        @include x-icon-sizing(x-icon-xl)
      }
    }

    @include media-breakpoint-up(md) {
      padding-right: $spacer * 0.5;
    }
  }

  .x-file-append {
    @extend %align-self-start;

    a {
      @extend %d-inline-flex;
    }

    .badge {
      @extend %mr-2,
              %my-1;
    }

    &.is-centered {
      @extend %align-self-center;
    }

    &.is-right {
      @extend %d-flex,
              %align-items-end;
    }

    &-sticky-right {
      @extend %my-0,
              %my-xl-0;
    }
  }

  .x-file-content-column {
    @extend %d-flex,
            %flex-column;
    flex: 1 1 70%;

    .x-title h6 {
      @include media-breakpoint-down(sm) {
        max-width: 12rem;
      }
    }
  }


.x-cell-currency {
  @extend %py-3,
          %border-left,
          %border-right;
  * {
    font-weight: 500;
  }
}
  .x-file-action {
    @extend %x-flex-center,
            %pr-2;
    width: 5rem;
  }

  .x-file-content-wrapper {
    @extend %d-flex,
            %flex-column,
            %flex-xl-row,
            %flex-grow-1,
            %flex-md-grow-1;
  }

  .btn {
    @extend %btn-sm,
            %font-weight-medium;
  }

  a {
    @extend %cursor-pointer;

    &,
    &:hover,
    &:active,
    &:visited {
      text-decoration: none;
    }
  }

  .badge {
    @extend %text-capitalize;
  }

  &.success {
    background-color: lighten(theme-color("success"), 44%);
    .x-upload-actions {
      background-color: lighten(theme-color("success"), 44%);
    }
  }

  &.danger {
    background-color: lighten(theme-color("danger"), 38%);
    .x-upload-actions {
      background-color: lighten(theme-color("danger"), 38%);
    }
  }
}