@import '../../common/style/press/var.scss';
@import '../../common/style/press/mixins/hairline.scss';

.press-cell--e-sport {
  --cell-background-color: rgba(255, 255, 255, .85);
  --cell-active-color: #f5f6fa;
  --cell-height: 1.12rem;
  --cell-line-height: unset;

  --cell-vertical-padding: .32rem;
  --cell-horizontal-padding: .32rem;

  --cell-text-color: #09134e;
  --cell-font-size: .32rem;

  --cell-value-font-size: .28rem;
  --cell-value-color: #9299c6;

  --cell-label-font-size: .2rem;
  --cell-label-color: #9299c6;
  --cell-label-margin-top: 0;

  --cell-icon-size: .24rem;
  --cell-right-icon-color: #9299c6;
}

.press-cell {
  position: relative;
  display: flex;
  box-sizing: border-box;
  width: 100%;
  padding: var(--cell-vertical-padding, $cell-vertical-padding)
    var(--cell-horizontal-padding, $cell-horizontal-padding);
  font-size: var(--cell-font-size, $cell-font-size);
  line-height: var(--cell-line-height, $cell-line-height);
  // 【修改点】增加height，默认为auto
  height: var(--cell-height, $cell-height);
  color: var(--cell-text-color, $cell-text-color);
  background-color: var(--cell-background-color, $cell-background-color);

  &::after {
    @include hairline-bottom($border-color, $padding-md, $padding-md);
  }

  &--borderless::after {
    display: none;
  }

  &-group {
    background-color: var(--cell-background-color, $cell-background-color);
  }

  &__label {
    margin-top: var(--cell-label-margin-top, $cell-label-margin-top);
    font-size: var(--cell-label-font-size, $cell-label-font-size);
    line-height: var(--cell-label-line-height, $cell-label-line-height);
    color: var(--cell-label-color, $cell-label-color);
  }

  &__value {
    overflow: hidden;
    text-align: right;
    vertical-align: middle;
    color: var(--cell-value-color, $cell-value-color);
    // 【修改点】增加value的font-size设置
    font-size: var(--cell-value-font-size, $cell-value-font-size);
  }

  &__title,
  &__value {
    flex: 1;
    // 【修改点】增加line-height，默认24px，否则h5下不会垂直居中
    line-height: var(--cell-line-height, $cell-line-height);

    &:empty {
      display: none;
    }
  }

  /* #ifdef MP-ALIPAY */
  ::v-deep .press-cell__left-icon,
  ::v-deep .press-cell__right-icon,
  /* #endif */
  &__left-icon,
  &__right-icon {
    display: flex;
    align-items: center;
    height: var(--cell-line-height, $cell-line-height);
    font-size: var(--cell-icon-size, $cell-icon-size);
  }

  /* #ifdef MP-ALIPAY */
  ::v-deep .press-cell__left-icon,
  /* #endif */
  &__left-icon {
    margin-right: var(--padding-base, $padding-base);
    vertical-align: middle;
    line-height: var(--cell-line-height, $cell-line-height);
  }

  /* #ifdef MP-ALIPAY */
  ::v-deep .press-cell__right-icon,
  /* #endif */
  &__right-icon {
    margin-left: var(--padding-base, $padding-base);
    color: var(--cell-right-icon-color, $cell-right-icon-color);
    line-height: var(--cell-line-height, $cell-line-height);
  }

  // 【修改点】 &--clickable&--hover不能用
  &--clickable.press-cell--hover,
  &--clickable:active {
    background-color: var(--cell-active-color, $cell-active-color);
  }

  &--required {
    overflow: visible;

    &::before {
      position: absolute;
      content: '*';
      left: var(--padding-xs, $padding-xs);
      font-size: var(--cell-font-size, $cell-font-size);
      color: var(--cell-required-color, $cell-required-color);
    }
  }

  &--center {
    align-items: center;
  }

  &--large {
    padding-top: var(
      --cell-large-vertical-padding,
      $cell-large-vertical-padding
    );
    padding-bottom: var(
      --cell-large-vertical-padding,
      $cell-large-vertical-padding
    );

    .press-cell__title {
      font-size: var(--cell-large-title-font-size, $cell-large-title-font-size);
    }

    .press-cell__value {
      font-size: var(--cell-large-value-font-size, $cell-large-value-font-size);
    }

    .press-cell__label {
      font-size: var(--cell-large-label-font-size, $cell-large-label-font-size);
    }
  }
}


/* #ifdef H5 */
.press-cell--clickable {
  cursor: pointer;
}

/* #endif */