// Set default customise component variables here,
// Override it in theme variables files
$card-border:                 1px solid #eee;
$card-box-shadow:             $box-shadow-sm !default;
$card-box-shadow-hover:       0 0.5rem 0.5rem -0.25rem rgba(theme-color("info"), 0.25) !default;

// Card List
.x-card-list {
  @extend .d-flex,
          .flex-wrap,
          .justify-content-start,
          .w-100;
  margin-left: -0.5rem;
  margin-right: -0.5rem;
}


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

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

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

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

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

  border: $card-border;

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


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

  .is-centered {
    @extend .text-center,
            .d-flex,
            .flex-column,
            .align-items-center,
            .justify-content-center;
  }
}

.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($card-box-shadow-hover);
    transform: scale(1.01);
  }
}

// Card Horizontal
.x-card-inline {
  @extend .x-card,
          .d-inline-flex,
          .flex-row,
          .align-items-stretch;
}

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

  .x-card-default & {
    @extend .d-flex,
            .align-items-center,
            .justify-content-center;
  }

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

  &.is-thumbnail {
    @extend .align-items-center,
            .justify-content-center;

    figure {
      @extend .mb-0,
              .mt-2,
              .d-flex,
              .align-items-center,
              .justify-content-center;
      max-width: 6rem;

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

      img {
        width: 100%;
        height: auto;
        border-style: none;
      }
    }

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

// Card Body
.x-card-body {
  @extend %font-size-sm,
          .p-0;

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

// Card Footer
.x-card-footer {
  @extend .d-flex,
          .align-items-center,
          .justify-content-between,
          .mt-auto,
          .pt-2;
}

// Card Content
.x-card-content {
  @extend .w-100,
          .overflow-hidden;
}



.x-status-list {
  @extend .list-unstyled;
  margin: 0 auto;
  margin-bottom: 1rem;

  a.list-item {
    @extend .d-flex,
            .px-4,
            .py-1,
            .align-items-center;
    
    border-radius: $border-radius;
    color: theme-color("black");
    font-size: $font-size-sm;

    &:hover,
    &:focus {
      @extend %cursor-pointer;

      color: theme-color("primary-lighter");
      background-color: #f5f6f7;
    }

    .x-icon {
      @extend .mr-2;
    }

    &.x-status-success .x-icon { @extend .text-success; }
    &.x-status-info .x-icon { @extend .text-info; }
    &.x-status-warning .x-icon { @extend .text-warning; }
    &.x-status-danger .x-icon { @extend .text-danger; }
  }
}


.x-platform-list {
  @extend .d-flex,
          .pt-2;

  .list-item {
    @extend .px-2,
            .text-primary-lighter;
  }
  .x-icon {
    @extend .x-icon-md;
  }
}