// Set default customise component variables here,
// Override it in theme variables files

$card-box-shadow:             $box-shadow-sm !default;
$x-card-border-hover-color:   var(--custom-theme-primary-hover, $border-active) !default;
$box-highlight-border-shadow: 0 0 0 2px $x-card-border-hover-color !default;

%x-card-hover-active-state {
  // Use box-shadow instead of border to prevent expanding element's dimension
  @include box-shadow($box-shadow-md, $box-highlight-border-shadow);
}

%x-card-inline,
.x-card-inline {
  &.current {
    @extend %border,
            %border-success;
  }
  @extend %x-shadow;
}


// Utilities
%x-card-hover-border,
.x-card-hover-border {
  @extend %cursor-pointer;
  @include transition(box-shadow 0.08s ease-out);

  &:hover,
  &:active {
    @extend %x-card-hover-active-state;
  }
}

%x-card-hover,
.x-card-hover {
  @include transition(all 0.18s ease-in-out);
  transform: scale(1);

  @include x-hover-focus-active {
    @include transition(all 0.18s ease-in-out);
    @include box-shadow($box-shadow-md);
    transform: scale(1.01);
  }
}

// Card List
%x-card-list,
.x-card-list {
  @extend %d-flex,
          %flex-wrap,
          %justify-content-center,
          %pb-2,
          %mb-4;

  .x-aside-footer & {
    @extend %mb-0,
            %justify-content-start;
    max-width: 32rem;
  }

  > * {
    @extend %mb-3;

    .x-aside-footer &,
    &:last-child {
      @extend %mb-0;
    }
  }
}

%x-card-list-item,
.x-card-list-item {
  @extend %px-2,
          %mb-3,
          %w-100;

  @include media-breakpoint-up(md) {
    max-width: 18.750rem;
  }
}

%x-card-wrap,
.x-card-wrap {
  @extend %position-relative;
  z-index: 1;
}

// Card
%x-card,
.x-card {
  @extend %card,
          %w-100,
          %p-3,
          %border-0,
          %overflow-hidden;

  .x-overlay-panel & {
    @extend  %p-2,
             %p-lg-3;
  }

  @include box-shadow($card-box-shadow);

  .card-title {
    @extend %font-size-base,
            %mb-1;
  }


  &.is-selected:before {
    @extend %d-block,
            %position-absolute;
    background-color: theme-color("primary-transparent");
    z-index: 0;
    width: 100%;
    height:100%;
    top: 0;
    left: 0;
    content: "";
  }

  .is-centered {
    @extend %text-center,
            %x-flex-center,
            %flex-column;
  }

  &.active {
    @extend %x-card-hover-active-state;
  }

  &-inline {
    @extend %x-card,
            %d-inline-flex,
            %flex-row,
            %mb-3,
            %align-items-stretch;
  }
}

// Prepend icon/image/avatar
%x-card-prepend,
.x-card-prepend {
  @extend %d-flex;

  .x-card-default & {
    @extend %x-flex-center;
  }

  .x-card-inline & {
    @extend %mr-3;
  }

  &.is-thumbnail {
    @extend %x-flex-center;

    figure {
      @extend %x-flex-center,
              %mb-0,
              %mt-2;
      max-width: 6rem;

      @include media-breakpoint-up(md) {
        max-width: 8rem;
      }

      img {
        @extend %h-auto,
                %w-100;
        border-style: none;
      }
    }

    .x-card-inline & {
      @extend %mr-3,
              %border-right;
      max-width: 9em;
    }
  }
}

// Card Body
%x-card-body,
.x-card-body {
  @extend %font-size-sm,
          %p-0,
          %w-100,
          %align-items-start,
          %overflow-hidden,
          %d-flex;


    .x-card-content & {
      .x-title {
        @extend %w-100;
      }
    }

  .x-card-default & {
    @extend %p-3;
    h6 {
      @extend %font-weight-medium;
    }
  }
}

// Card Footer
%x-card-footer,
.x-card-footer {
  @extend %x-flex-a-center,
          %justify-content-between,
          %mt-auto,
          %pt-2,
          %w-100;
}

%x-card-header,
.x-card-header {
  @extend %d-flex,
          %w-100,
          %position-relative,
          %align-items-start,
          %overflow-hidden;
  a {
    @extend %text-default;
    @include x-hover-focus-active {
      @extend %text-decoration-none;
    }
  }
}

// Card Content

%x-card-content,
.x-card-content {
  @extend %w-100,
          %align-items-start;

          .x-card-comments-item & {
            @extend %overflow-hidden;
          }

  .x-card-inline & {
    @extend %x-flex-j-center,
            %flex-column;
  }
}