@import '../../style/themes/index';
@import '../../style/mixins/index';

@m-content-card-prefix-cls: m-card;

.@{m-content-card-prefix-cls}-item {
  position: relative;
  max-width: @card-item-max-width;
  margin: @card-item-margin;
  cursor: pointer;
  user-select: none;
  background: @card-item-background;
  border: @card-item-border;
  border-radius: @card-item-border-radius;

  .@{m-content-card-prefix-cls}-coming-tip {
    position: absolute;
    top: @card-item-coming-tip-top;
    left: @card-item-coming-tip-left;
    z-index: 10;
  }

  &-img-container {
    position: relative;
    display: flex;
    align-items: center;
    height: @card-item-img-container-height;
    background: @card-item-img-container-background;

    > div:first-child {
      position: relative;
      padding: @card-item-img-container-div-firstchild-padding;
      margin: @card-item-img-container-div-firstchild-margin;

      > img {
        width: 100%;
        max-width: @card-item-img-container-div-firstchild-img-max-width;
        max-height: @card-item-img-container-div-firstchild-img-max-height;
        border-radius: @card-item-img-container-div-firstchild-img-border-radius;
        object-fit: cover;
      }

      .@{m-content-card-prefix-cls}-img-alt {
        position: absolute;
        top: @card-item-img-container-div-firstchild-img-alt-top;
        left: @card-item-img-container-div-firstchild-img-alt-left;
        display: flex;
        align-items: center;
        justify-content: center;
        width: @card-item-img-container-div-firstchild-img-alt-width;
        height: @card-item-img-container-div-firstchild-img-alt-height;
        font-size: @card-item-img-container-div-firstchild-img-alt-font-size;
        font-weight: @card-item-img-container-div-firstchild-img-alt-font-weight;
        line-height: @card-item-img-container-div-firstchild-img-alt-line-height;
        color: @card-item-img-container-div-firstchild-img-alt-color;
        background: @card-item-img-container-div-firstchild-img-alt-background;
        border-radius: @card-item-img-container-div-firstchild-img-alt-border-radius;
      }
    }
  }

  &-mask {
    position: absolute;
    top: 0;
    left: 0;
    display: true;
    width: 100%;
    height: 100%;
    background: @card-item-mask-background;
    opacity: 0;
    transition: opacity 0.3s;

    &-operation-collect {
      position: absolute;
      top: @card-item-mask-operation-collect-top;
      right: @card-item-mask-operation-collect-right;
      width: @card-item-mask-operation-collect-width;
      height: @card-item-mask-operation-collect-height;
      text-align: center;
      background: @card-item-mask-operation-collect-background;
      border-radius: @card-item-mask-operation-collect-border-radius;
      box-shadow: @card-item-mask-operation-collect-box-shadow;

      .@{m-content-card-prefix-cls}-star-common {
        font-size: @card-item-mask-operation-collect-star-common-font-size;
        vertical-align: middle;
        cursor: pointer;
        outline: none;
      }

      .@{m-content-card-prefix-cls}-star {
        color: @card-item-mask-operation-collect-star-color;
      }
    }

    .@{m-content-card-prefix-cls}-operation-btn {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: @card-item-mask-operation-btn-margin-top;

      > button {
        border-radius: @card-item-mask-operation-btn-button-border-radius;
      }

      > button:first-of-type {
        margin-bottom: @card-item-mask-operation-btn-button-margin-bottom;
      }

      .@{m-content-card-prefix-cls}-btn-disabled {
        cursor: no-drop;
      }
    }
  }

  &-info {
    display: flex;
    flex-direction: column;
    height: @card-item-info-height;
    padding: @card-item-info-padding;
    margin-top: @card-item-info-margin-top;

    .ellipsis() {
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .@{m-content-card-prefix-cls}-info-top {
      display: flex;
      align-items: center;

      > img {
        padding-right: @card-item-info-top-img-padding-right;
      }

      > span {
        font-size: @card-item-info-top-span-font-size;
        font-weight: @card-item-info-top-span-font-weight;
        line-height: @card-item-info-top-span-line-height;
        color: @card-item-info-top-span-color;
        .ellipsis();
      }
    }

    .@{m-content-card-prefix-cls}-info-bottom {
      font-size: @card-item-info-bottom-font-size;
      color: @card-item-info-bottom-color;
      > p {
        .ellipsis();

        margin: @card-item-info-bottom-p-margin;
      }
    }
  }

  &:hover {
    .@{m-content-card-prefix-cls}-item-mask {
      opacity: 1;
    }
  }
}