// 样式前缀变量
$prefix: pct;

// BEM 命名规范
.#{$prefix}-record-cash {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  @include flex(row, center, center);
  z-index: 1000;

  // 主容器
  &__wrap {
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    @include flex(column);
    background: #e8f0ff url(https://image-1251917893.file.myqcloud.com/tip-project/fission-password/component/record-bg.png) no-repeat top center;
    background-size: 100% auto;
    overflow: hidden;
    z-index: 90;

    // 空数据状态
    &--empty {
      padding-bottom: .36rem;
    }
  }

  // 返回按钮区域
  &__go-back {
    position: absolute;
    top: 0;
    left: 0;
    display: none;
    align-items: center;
    width: 100%;
    height: .72rem;
    font-size: 0;
    color: #303030;
    font-weight: 600;
  }

  // 返回按钮图标
  &__go-back-icon {
    width: 1.68rem;
    height: .48rem;
    background: url(https://image-1251917893.file.myqcloud.com/tip-project/liebian/vert/go-back-vert.png) no-repeat .4rem center;
    background-size: .48rem .48rem;
  }

  &__return-button {
    position: fixed;
    top: .24rem;
    left: .24rem;
    width: .48rem;
    height: .48rem;
    background: url(https://image-1251917893.file.myqcloud.com/tip-project/welfare-party/go-back.png) no-repeat 50%;
    background-size: contain;
    z-index: 6;
  }

  // 许愿按钮
  &__award-wish {
    position: absolute;
    top: .32rem;
    right: .32rem;
    width: 1.1rem;
    height: 1.2rem;
    background: url(https://image-1251917893.file.myqcloud.com/tip-project/welfare-party/record/wish-icon.png) no-repeat center;
    background-size: contain;
  }

  // 记录详情区域
  &__record-detail {
    @include flex(column);
    flex-shrink: 0;
    margin: 0 auto;
  }

  // 失效时间
  &__expire-time {
    height: .44rem;
    margin: .4rem auto .92rem;
  }

  // 时间信息
  &__time-info {
    @include flex(row, center, center);
    height: 100%;
    color: #fff;
    font-size: .24rem;
    padding: 0 .16rem;
    border-radius: .08rem;
    background: rgba(0, 0, 0, .5);
  }

  // 高亮文字
  &__award-light {
    color: #ffd400;
  }

  // 积分包装器
  &__point-wrap {
    @include flex(column, center, center);
    min-width: 2rem;
    height: 1.76rem;
    margin: 0 auto 1.24rem;
  }

  // 积分数量
  &__point-amount {
    font-size: .56rem;
    color: rgba(33, 81, 255, .70);
    font-weight: 600;
  }

  // 积分名称
  &__point-name {
    font-size: .32rem;
    color: #000;
  }

  // 记录按钮
  &__record-btn {
    position: relative;
    @include flex(row, center, center);
    width: 3.32rem;
    height: .84rem;
    margin: 0 auto .4rem;

    &::before {
      position: absolute;
      left: 0;
      top: 0;
      content: '';
      width: 100%;
      height: 100%;
      background: url(https://image-1251917893.file.myqcloud.com/tip-project/welfare-party/record/record-btn.png) no-repeat center;
      background-size: contain;
    }
  }

  // 记录按钮文字
  &__record-btn-txt {
    position: relative;
    font-weight: 600;
    font-size: .36rem;
    background: linear-gradient(352.54deg, #760c0c 5.01%, #983a3a 93.52%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    filter: drop-shadow(0 .02rem .03rem rgba(255, 255, 255, .5));
    -webkit-filter: drop-shadow(0 .02rem .03rem rgba(255, 255, 255, .5));
  }

  // 记录列表
  &__record-list {
    @include flex(column);
    flex: 1;
    overflow: hidden;
  }

  // Tab包装器
  &__tab-wrap {
    @include flex(row, center, center);
    flex-shrink: 0;
    height: .96rem;
    border-bottom: .01rem solid #e7e7e7;
  }

  // Tab项
  &__tab-item {
    flex: 1;
    line-height: .96rem;
    font-size: .28rem;
    color: rgba(0, 0, 0, .9);
    text-align: center;
    flex-shrink: 0;
    cursor: pointer;
    user-select: none;

    // 激活状态
    &--active {
      position: relative;
      font-weight: 600;
      color: #5d5be5;

      &::after {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        content: '';
        margin: auto;
        width: .32rem;
        height: .06rem;
        border-radius: .06rem;
        background-color: currentColor;
      }
    }
  }

  // 列表容器
  &__list-container {
    flex: 1;
    overflow-y: auto;
  }

  // 记录提示
  &__record-tip {
    @include flex(row, flex-start, center);
    font-size: .24rem;
    color: #666;
    padding: .16rem .4rem;

    // 隐藏状态
    &--hide {
      font-size: 0;
    }
  }

  // 记录项
  &__record-item {
    @include flex(row, center, center);
    padding: .32rem;
    margin: 0 .24rem .16rem;
    border-radius: .16rem;
    background: #fff;
  }

  // 记录信息
  &__record-info {
    flex: 1;
    flex-shrink: 0;
    padding-right: .24rem;
    overflow: hidden;
  }

  // 记录描述
  &__record-desc {
    color: rgba(0, 0, 0, .9);
    font-size: .28rem;
    font-weight: 600;
    padding-bottom: .16rem;
    @include textEllipsis(1);
  }

  &__record-text {
    color: #9b9b9b;
    font-size: .24rem;
    @include textEllipsis(1);
    margin-bottom: .12rem;
  }

  // 记录时间
  &__record-time {
    color: #9b9b9b;
    font-size: .24rem;
    @include textEllipsis(1);
  }

  // 查看奖励按钮
  &__look-award {
    @include flex(row, center, center);
    width: 1.28rem;
    height: .52rem;
    color: #5d5be5;
    font-size: .24rem;
    padding: 0 .08rem;
    background: url(https://image-1251917893.file.myqcloud.com/V/border-btn.png) no-repeat center;
    background-size: 100% 100%;
  }

  // 空数据包装器
  &__record-empty-wrap {
    @include flex(column, center, center);
    width: 100%;
    height: 100%;
  }

  // 空数据图标
  &__empty-icon {
    width: 2.4rem;
    height: 1.76rem;
    background: url(https://image-1251917893.file.myqcloud.com/tip-project/liebian/vert/location_default.png) no-repeat center;
    background-size: 100% auto;
  }

  // 空数据提示
  &__empty-tip {
    color: #b0b2b8;
    font-size: .28rem;
    margin-top: .28rem;
  }

  // 加载中
  &__loading {
    text-align: center;
    padding: .32rem;
    font-size: .24rem;
    color: #666;
  }

  // 加载完成
  &__finished {
    text-align: center;
    padding: .32rem;
    font-size: .24rem;
    color: rgba(0, 0, 0, .26);
  }
}