@import '../variable';

/* 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;
    }
  }
}

@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%;
      .row.functions {
        .hx-button {
          margin-bottom: 0;
        }
      }
    }
  }
}