@import '../../styles/mixins/text-ellipsis.scss';

.nut-theme-dark {
  .nb-card {
    .nb-card__right {
      color: $dark-color;
    }
  }
}

%noClamp {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-all;
}

.nb-card {
  width: 100%;
  background-color: #fff;

  &__main {
    display: flex;
  }

  &__left {
    width: 120px;
    height: 120px;
    flex-shrink: 0;
    position: relative;

    > img {
      display: block;
      width: 100%;
      height: 100%;
    }
  }

  &__right {
    flex: 1;
    padding: 10px;
    width: calc(100% - 130px);

    .nb-card__right__title {
      line-height: 1.5;
      font-size: 14px;

      &.multiple-lines {
        @extend %noClamp;
      }

      &.one-line {
        @include oneline-ellipsis;
      }
    }
    .nb-card__right__price {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      line-height: 18px;

      > * {
        margin-top: 9px;
      }

      .nut-price {
        @include text-ellipsis;

        .nut-price__big {
          font-size: 18px;
        }
        .nut-price__symbol, 
        .nut-price__integer, 
        .nut-price__decimal {
          display: inline;
        }
        .nut-price__symbol,
        .nut-price__point,
        .nut-price__small {
          font-size: 12px;
        }
      }
    }
    .nb-card__right__shop {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .nb-card__right__shop__name {
        line-height: 1.5;
        color: #999;
        font-size: 12px;
        padding-top: 4px;
        width: 100%;

        span {
          @include text-ellipsis;
          display: inline-block;
          max-width: 90%;
          vertical-align: -5px;
          margin-right: 5px;
        }
      }
    }
  }

  &.half-line {
    display: inline-flex;
    flex-direction: column;
    width: 48%;
    margin-right: 10px;
    margin-bottom: 10px;

    .nb-card__main {
      display: inline-flex;
      flex-direction: column;
    }

    &:nth-child(2n+1) {
      margin-right: 0;
    }

    .nut-image {
      position: absolute;
      top: 0;
    }

    img {
      width: 100%;
    }

    .half-line-img {
      position: relative;
    }

    .nb-card__right__title {
      color: #333;
      margin-top: 8px;

      &.one-line {
        @include oneline-ellipsis;
      }

      &.multiple-lines {
        @extend %noClamp;
      }
    }

    .nb-card__left {
      width: 100%;
      padding-top: 100%;

    }

    .nb-card__right {
      width: 100%;
    }

    .half-line-bottom {
      padding: 10px;
    }
  }

  .img-tag {
    position: absolute;
    z-index: 1;

    &.top-right {
      right: 0;
    }
  }
}