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

$card-box-shadow:             $box-shadow-sm !default;
$card-border-radius:          $border-radius !default;

// Card List
.x-card-list {
  @extend .d-flex,
          .flex-wrap;
  margin-left: -0.5rem;
  margin-right: -0.5rem;

  > * {
    @extend .p-2;
    width: 100%;

    @include media-breakpoint-up(lg) {
      width: 50%;
    }
    @include media-breakpoint-up(xl) {
      width: 33.333%;
    }
  }
}

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

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

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

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

// 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;
    min-height: 5.5em;
  }

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

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

    figure {
      @extend .mb-0,
              .d-flex,
              .align-items-center,
              .justify-content-center;
      img {
        width: auto;
        height: 100%;
        border-style: none;
        max-height: 6em;
      }
    }

    .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;
}


// TODO
// Card content list

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

  .list-item {
    @extend .d-flex,
            .text-grey,
            .py-1,
            .align-items-center;
    font-size: $font-size-sm;

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

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