@import '../variable';

$height-card-row: 28px;
/* hxui卡片樣式 */
.hx-card {
  padding: $pm-md;
  display: inline-block;
  position: relative;
  .content {
    background-color: white;
    overflow: hidden;
    border: 1px solid $color-gray;
    width: 100%;
    cursor: default;
    position: relative;
    max-width: 300px;
    border-radius: $border-radius-bg;
    transition: box-shadow .4s;
    box-shadow: 0 3px 10px -5px rgba(0,0,0, .2);
    &:hover {
      box-shadow: 0 8px 20px -5px rgba(0,0,0, .2);
    }
    .top-left,
    .top-right {
      position: absolute;
      top: $pm-sm;
      z-index: 50;
    }
    .top-left {
      left: $pm-sm;
    }
    .top-right {
      right: $pm-sm;
    }
  }
  .row {
    position: relative;
    display: block;
    text-align: left!important;
    padding: 0 $pm-sm;
    height: $height-card-row;
    &.center {
      text-align: center;
    }
    label, span, a {
      font-size: $font-md;
      line-height: $font-md * 2.5;
      height: $font-md * 2.5;
      @include nowrap;
      color: $color-heavy;
    }
    a:hover {
      color: $color-main;
    }
    label {
      color: $color-gray-deep;
      width: 60px;
      display: inline-block;
      line-height: $height-card-row;
      height: $height-card-row;
    }
    .text {
      @include wcalc(calc(100% - 65px));
      @include nowrap;
      display: inline-block;
      line-height: $height-card-row;
      height: $height-card-row;
    }
    .right {
      right: $pm-sm;
      top: 0;
      position: absolute;
      line-height: $height-card-row;
      height: $height-card-row;
    }
    .main {
      color: $color-main;
    }
    &:first-child {
      line-height: $height-normal;
      height: $height-normal;
      span {
        line-height: $height-normal;
        display: block;
        width: 100%;
      }
    }
    &.img {
      height: 150px;
      overflow: hidden;
      border-bottom: 1px solid $color-gray-light;
      margin-bottom: $pm-sm;
      img {
        @include centerInParent;
        width: 100%;
        height: auto;
      }
      span {
        position: absolute;
        right: $pm-sm;
        bottom: $pm-sm;
        color: white;
        text-shadow: 0 1px 3px rgba(0,0,0,.5);
      }
    }
    &.functions {
      margin-top: $pm-sm;
      text-align: right!important;
      padding: $pm-sm;
      height: auto;
      border-top: 1px solid $color-gray;
      &.center {
        text-align: center!important;
      }
    }
  }
}

@media screen and (min-width: 1920px) {
  .hx-card {
    width: 15%;
  }
}

@media screen and (min-width: 1600px) and (max-width: 1920px) {
  .hx-card {
    width: 20%;
  }
}

@media screen and (min-width: 1280px) and (max-width: 1600px) {
  .hx-card {
    width: 25%;
  }
}

@media screen and (min-width: 1024px) and (max-width: 1280px) {
  .hx-card {
    width: 33.33%;
  }
}

@media screen and (min-width: 640px) and (max-width: 1024px) {
  .hx-card {
    width: 50%;
  }
}

@media screen and (max-width: 640px) {
  .hx-card {
    width: 100%;
    .content {
      max-width: 100%;
    }
  }
}