/**
 * card
 */

.card {
  position: relative;
  .flex-full();
  display: flex;
  align-items: flex-start;
  width: 100%;
  z-index: @index-base; // fix :before negative z-index
}

a.card, label.card {
  &:hover, &.hover, &:active, &.active {
    z-index: @index-active;
  }
}

.card-inner {
  .full();
  min-height: 100%;
  // @FIX full height and card-block empty spaces
  display: flex;
  flex-direction: column;
  .card-content {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    // @FIX card alignment stretch
    .flex-auto();
  }
}

.card-design {
  .design-setup();
  border-radius: inherit;
}

.card-block {
  position: relative;
  width: 100%;
}

.card-asset {
  position: relative;
  .full();
  > * {
    .full();
    height: auto;
  }
}

// radius

.card-inner, .card-asset {
  border-radius: inherit;
}

.card-inner, .card-content, .card-item {
  &:first-child, &:last-child {
    > .card-content, > .card-block, > .card-item, > .card-asset {
      &:first-child {
        border-top-left-radius: inherit;
        border-top-right-radius: inherit;
        border-bottom-left-radius: initial;
        border-bottom-right-radius: initial;
      }
      &:last-child {
        border-top-left-radius: initial;
        border-top-right-radius: initial;
        border-bottom-left-radius: inherit;
        border-bottom-right-radius: inherit;
      }
      &:first-child:last-child {
        border-top-left-radius: inherit;
        border-top-right-radius: inherit;
        border-bottom-left-radius: inherit;
        border-bottom-right-radius: inherit;
      }
    }
  }
}

.card-group {
  &:first-child, &:last-child {
    > * {
      &:first-child {
        border-top-left-radius: inherit;
        border-top-right-radius: initial;
        border-bottom-left-radius: inherit;
        border-bottom-right-radius: initial;
      }
      &:last-child {
        border-top-left-radius: initial;
        border-top-right-radius: inherit;
        border-bottom-left-radius: initial;
        border-bottom-right-radius: inherit;
      }
    }
  }
}

// special

.card-group {
  display: flex;
  align-items: stretch;
}

.card-item-nested {
  margin: 0 !important;
  padding: 0 !important;
}

.card-horizontal {
  .card-content {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
  }
  .card-asset {
    .flex-full();
    > * {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
  // radius
  .card-content, .card-item {
    &:first-child, &:last-child {
      > .card-block, > .card-item, > .card-asset {
        &:first-child {
          border-top-left-radius: inherit;
          border-top-right-radius: initial;
          border-bottom-left-radius: inherit;
          border-bottom-right-radius: initial;
        }
        &:last-child {
          border-top-left-radius: initial;
          border-top-right-radius: inherit;
          border-bottom-left-radius: initial;
          border-bottom-right-radius: inherit;
        }
      }
    }
  }
}

.card-disable {
  .card-nodesign();
  .card-block {
    padding: 0 !important;
  }
}

/**
 * @generate-card-group
 */

// generate

& when not (@generate-card-group = false) {

  // generate-card-horizontal-responsive

  .generate-card-horizontal-responsive();
  .generate-card-horizontal-responsive(@i: length(@generate-card-group)) when (@i > 0) {
    .generate-card-horizontal-responsive(@i - 1);
    @breakpoint: extract(@generate-card-group, @i);
    & when (@breakpoint = none) {
      .card-group {
        .card-group() !important;
      }
    }
    & when not (@breakpoint = none) {
      @query-min: 'min-@{breakpoint}';
      @media @@query-min {
        .card-group-@{breakpoint} {
          .card-group() !important;
        }
      }
    }
  }

}

/**
 * @generate-box-horizontal
 */

// generate

& when not (@generate-box-horizontal = false) {

  // generate-card-horizontal-responsive

  .generate-card-horizontal-responsive();
  .generate-card-horizontal-responsive(@i: length(@generate-box-horizontal)) when (@i > 0) {
    .generate-card-horizontal-responsive(@i - 1);
    @breakpoint: extract(@generate-box-horizontal, @i);
    & when (@breakpoint = none) {
      .card-horizontal {
        .card-horizontal() !important;
      }
    }
    & when not (@breakpoint = none) {
      @query-min: 'min-@{breakpoint}';
      @media @@query-min {
        .card-horizontal-@{breakpoint} {
          .card-horizontal() !important;
        }
      }
    }
  }

}