@import "./base.less";

.@{css-prefix}.card {
  position: relative;
  background: #fff;
  .transition(all .3s);
  font-size: 1em;
  .box-shadow;
  .border;
  border-radius: @border-radius @border-radius 0 0;
  max-width: 100%;
  display: flex;
  .flex-direction(column);
  width: 290px;

  &.fluid {
    width: 100%;
  }

  &.nopadding {
    > .content {
      padding: 0;
    }
  }

  .card-loop-color(@color-length);

  > .image {
    font-size: 0;
    line-height: 1;
  }

  > .header {
    border-bottom: @card-border-style;
    .padding;
  }
  > .content {
    .padding;
    border-bottom: @card-border-style;
    flex-grow: 1;

    &:last-child {
      border-bottom: none;
    }

    > .tabs {
      border: none;
      box-shadow: none;
      .nav.top li {
        margin-top: 0;
        border-top: 0;
      }
    }
    > * > .table, > .table {
      border: none;
    }
  }
  > .footer {
    .padding;
  }
}

.@{css-prefix}.cards {
  display: flex;
  flex-wrap: wrap;
  margin: -@padding-horizontal/2;
  align-items: flex-start;

  > .card {
    margin: @padding-horizontal/2;
  }

  &.two > .card {
    width: calc(~"50% - 0.925em")
  }
  &.three > .card {
    width: calc(~"33.333% - 0.925em")
  }
  &.four > .card {
    width: calc(~"25% - 0.925em")
  }
  &.five > .card {
    width: calc(~"20% - 0.925em")
  }
  &.six > .card {
    width: calc(~"16.666% - 0.925em")
  }
  
}

.@{css-prefix}.tabs {
  .cards {
    margin: @padding-horizontal/2;
  }
}