@import "mixins/mixins";
// @import "common/var";

@include b(card) {
  // border-radius: $--card-border-radius;
  border-radius: $--border-radius-medium;
  // border: 1px solid $--card-border-color;
  background-color: $--color-white;
  overflow: hidden;
  color: $--color-text-regular;
  transition: 0.3s;

  @include when(no-border) {
    border: 0;
  }

  @include when(always-shadow) {
    // box-shadow: $--box-shadow;
    box-shadow: $--shadow1-center;
  }

  @include when(hover-shadow) {
    &:hover,
    &:focus {
      // box-shadow: $--box-shadow;
      box-shadow: $--shadow1-center;
    }
  }

  @include when(never-shadow) {
    // border-radius: 0;
    border-radius: $--border-radius-none;
  }

  @include e(header) {
    padding: 0;
    border: 0;
    box-sizing: border-box;
    height: $--card-header-height;
    line-height: $--card-header-height;
    display: flex;
    align-items: center;
    .header-icon {
      display:flex;
      align-items: center;
      height: 100%;
      margin-right: 8px;
      >i{
        font-size: $--font-size-title-1;
      }
    }
    .title {
      font-weight: $--font-weight-500;
      // position: relative;
      line-height: 24px;
      // padding: 16px 0;
    }

    .more {
      font-size: $--font-size-body-3;
      font-weight: $--font-weight-400;
      float: right;
      color: $--color-text-3;
      display: flex;
      align-items: center;
      // line-height: 22px;
      // padding: 17px 0;
      >i{
        font-size: $--font-size-title-1;
      }
    }
  }
  .borders{
    border-bottom: $--border-1 $--border-style-base $--card-border-color;
  }
  @include when(senior) {
    @include e(header) {
      padding-left: 35px;
      padding-right: 24px;
      .title {
        font-size: $--card-title-font-size;
        &::before {
          content: '';
          position: absolute;
          left: -11px;
          top: 50%;
          transform: translateY(-50%);
          background: $--primary-6;
          height: 14px;
          width: 3px;
        }
      }
    }

    @include e(body) {
      padding: 16px 24px 24px 24px;
    }
  }

  @include when(second) {
    @include e(header) {
      padding-left: 16px;
      padding-right: 12px;
      font-size: $--font-size-title-1;
      height: $--card-header-second-height;
      line-height: $--card-header-second-height;
    }

    @include e(body) {
      padding: 12px 16px 16px;
      font-size: $--font-size-body-4;
      font-weight: $--font-weight-400;
      color: $--color-text-regular;
      line-height: 21px;
    }
  }

  @include when(inner){
    box-shadow: none;
    border: $--border-1 solid $--card-border-color;
    // border-radius: 0;
    border-radius: $--border-radius-none;
    @include e(header) {
      padding-left: 16px;
      padding-right: 12px;
      font-size: $--font-size-title-1;
      height: $--card-header-second-height;
      line-height: $--card-header-second-height;
    }

    @include e(body) {
      padding: 12px 16px 16px;
      font-size: $--font-size-body-4;
      font-weight: $--font-weight-400;
      color: $--color-text-regular;
      line-height: 21px;
    }
  }

  @include when(net) {
    box-shadow: 1px 0 0 0 $--card-border-color,0 1px 0 0 $--card-border-color,1px 1px 0 0 $--card-border-color,1px 0 0 0 $--card-border-color inset,0 1px 0 0 $--card-border-color inset;
    border: none;
    margin: 0!important;
  }

  .is-concise {
    height: $--card-concise-height;

    @include m(wrap) {
      padding-top: 14px;
      margin-left: 16px;
      display: flex;

      &-img {
        // border-radius: 50%;
        border-radius: $--border-radius-circle;
      }

      &-text {
        margin-left: 8px;
        font-size: $--font-size-body-1;
        & div:first-child {
          font-weight: $--font-weight-500;
        }
        & div:last-child {
          color: $--color-text-3;
        }
      }
    }
  }
  .only-concise {
    min-height: $--card-concise-height;
    padding: 12px 16px;
    font-size: $--font-size-body-4;
    font-weight: $--font-weight-400;
    color: $--color-text-1;
    line-height: 21px;
  }

  @include when(loading) {
    position: relative;
    pointer-events: none;
    .el-card__loading {
      width: 100%;
      position: absolute;
      left: 50%;
      top: 50%;
      color: $--color-primary;
      font-size: $--font-size-title-1;
      transform: translate(-50%, -50%);
      text-align: center;
      .el-icon-loading {
        font-size: $--font-size-title-3;
        margin-bottom: 4px;
      }
    }

    &:before {
      pointer-events: none;
      content: '';
      position: absolute;
      left: -1px;
      top: -1px;
      right: -1px;
      bottom: -1px;
      border-radius: inherit;
      background-color: rgba(255,255,255,0.8);
    }
  }

  @include e(btn) {
    flex: 1;
    text-align: right;
    line-height: 22px;
    padding-right: 12px;
    padding-top: 5px;
    padding-bottom: 5px;
    cursor: pointer;
    color: $--color-text-3;
  }

  @include e(body) {
    line-height: 22px;
  }

  @include e(footer) {
    border-top: $--border-1 solid $--card-border-color;
    .el-button--mini {
      padding: 4px 12px;
    }
  }

  // .is-concise__body {
  //   padding: 0 16px 16px!important;
  // }
}