/*
 * desc: 奖励卡片组件样式
 * date: 2025-08-11
 * author: janfzhao
 * email: janfzhao@tencent.com
 */
@import '../../common/style/general/variables.scss';
@import '../../common/style/general/mixins/flex.scss';
@import '_var.scss';

.#{$prefix}-prize-list {
  padding: $pl-content-padding-tb $pl-content-padding-lr;
  background-color: #fff;

  &__header {
    @include flex(row, space-between, center);
    padding-bottom: $pl-content-padding-tb;

    &-title {
      font-size: $pl-primary-font-size;
      color: $pl-text-color-primary;
      font-weight: 500;
    }

    &-desc {
      font-size: $pl-small-font-size;
      color: $pl-text-color-light;
    }
  }

  // 网格布局模式
  &__grid {
    @include flex(row, flex-start, flex-start);
    flex-wrap: wrap;
    gap: .24rem;
  }

  &__grid-item {
    @include flex(column, center, center);
    width: $pl-prize-size;
    text-align: center;
  }

  // 列表布局模式
  &__list {
    @include flex(column, flex-start, stretch);
  }

  &__list-item {
    @include flex(row, flex-start, center);
    height: $pl-list-height;
    border-bottom: 1px solid $pl-divider-color;
    padding: .24rem 0;

    &:last-child {
      border-bottom: none;
    }
  }

  &__list-content {
    @include flex(column, center, flex-start);
    margin-left: .24rem;
    flex: 1;
    overflow: hidden;
  }

  &__list-title {
    font-size: $pl-secondary-font-size;
    color: $pl-text-color-primary;
    margin-bottom: .08rem;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  &__list-desc {
    font-size: $pl-small-font-size;
    color: $pl-text-color-light;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  // 通用奖品样式
  &__prize {
    width: $pl-prize-size;
    height: $pl-prize-size;
    border: $pl-prize-border-width solid $pl-prize-border-color;
    border-radius: $pl-prize-radius;
    overflow: hidden;
    position: relative;
    flex-shrink: 0;

    &-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    &-count {
      position: absolute;
      bottom: 0;
      right: 0;
      font-size: $pl-small-font-size;
      background-color: rgba(0, 0, 0, .5);
      color: #fff;
      padding: 0 .08rem;
      border-top-left-radius: $pl-prize-radius;
    }
  }

  &__name {
    font-size: $pl-small-font-size;
    color: $pl-text-color-primary;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: .16rem;
  }

  &__foot {
    @include flex(row, flex-end, center);
    margin-top: .24rem;

    &-more {
      font-size: $pl-small-font-size;
      color: $pl-text-color-light;
    }
  }
}