@import "./variables.scss";
@import "./mixins.scss";

.dao-card {
  color: $font-color-dark;
  font-size: $font-size-md;
  font-weight: 400;
  border: $border;
  border-radius: $border-radius-card-size;
  box-shadow: 0 1px 4px rgba(204, 209, 217, 0.3);
  background-color: $background-color-body;
  line-height: 1;
  // margin-right: 20px;
  // margin-bottom: 20px;
  display: block;
  &:hover {
    text-decoration: none;
  }
  &-layout {
    // 为什么用 flex，因为它不会像 inline-block 那样有多余的留白
    // 也不会像是 float 那样高度不一致时会影响布局
    // 只是兼容性方面 flex-wrap 支持 IE11 及以上
    display: flex;
    flex-wrap: wrap;
    a {
      text-decoration: none;
    }
  }
  &-col {
    padding: $card-side-blank;
    min-width: calc(100% / 3);
    max-width: calc(100% / 3);
    width: calc(100% / 3);
    // flex: 1 1 0; 在 safari 上会产生兼容问题
    // flex: 1 1 0; // 相当于 flex: 1;
    flex: none;
  }
  &-main {
    padding: 15px;
    display: flex;
    &:hover {
      text-decoration: none;
    }
    .icon {
      flex: none;
      // 有谜之 1px 的间隙，所以这里固定高度
      height: $icon-size-md;
      svg, img {
        width: $icon-size-md;
        height: $icon-size-md;
        border-radius: $border-radius-icon-size;
      }
    }
    .content {
      flex: auto;
      padding-left: 13px;
      height: $icon-size-md;
      // 一定需要 overflow: hidden 不然 .title 的 span 的省略不起作用
      overflow: hidden;
      .title {
        font-size: $font-size-md;
        font-weight: 500;
        line-height: $line-height-xxs;
        display: flex;
        overflow: visible;
        > span:first-child,
        > a {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          flex: 0 1 auto;
          display: inline-block;
          color: $font-color-dark;
        }
        > span + span {
          flex: 0 0 auto;
        }
        svg {
          margin-left: 4px;
          flex: 0 0 auto;
          width: $icon-size-xs;
          height: $icon-size-xs;
          display: inline-block;
        }
        .icon-verified {
          fill: $green;
        }
        .icon-cloud {
          fill: $grey-dark;
        }
      }
      .sub-title {
        font-size: $font-size-sm;
        line-height: $line-height-xs;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: block;
        color: $font-color-dark;
        padding-top: 2px;
      }
      .desc {
        font-size: $font-size-sm;
        color: $font-color-light;
        line-height: $line-height-xs;
        // hack blank
        padding-top: 3px;
        // hack height
        height: $line-height-xs * 2;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
      }
    }
  }
  &-footer {
    display: flex;
    background-color: $background-color-footer;
    border-top: $border;
    padding: 7px 15px;
    .footer-main {
      flex: 1;
      font-size: $font-size-sm;
      color: $font-color-light;
      line-height: $line-height-md;
    }
    .footer-opt {
      flex: none;
      .dao-btn {
        // font-size: 13px;
        // padding: 5px 10px;
      }
    }
  }
}
// 不 not 样式会互相影响 主要是在 no-side-blank 的时候
@function getNotIncludeSelectorInBlankSizes($array) {
  $not-include-selector: '';
  @each $name, $size in $array {
    $not-include-selector: ':not(#{$name})#{$not-include-selector}';
  }
  @return $not-include-selector;
}
@include dao-card-media(0, getNotIncludeSelectorInBlankSizes($offset-sizes));
@each $name, $size in $offset-sizes {
  @include dao-card-media($size, $name);
}
