@import '../../styles/define';

:root {
  --hor-cell-background: var(--van-background-2);
  --hor-cell-text-color: var(--van-text-color);
  --hor-cell-value-color: var(--van-text-color-2);
  --hor-cell-border-color: var(--van-border-color);
}

.hor-cell {
  @extend %df;
  @extend %bsb;
  @extend %w100;
  @extend %pr;
  font-size: j(14);
  padding: j(10) j(16);
  line-height: 1.6;
  background-color: var(--hor-cell-background);

  &:after {
    @extend %pa;
    @extend %bsb;
    @extend %pen;
    @extend %r0;
    @extend %l0;
    @extend %b0;
    content: ' ';
    /* prettier-ignore */
    border-bottom: 1PX solid var(--hor-cell-border-color);
    transform: scaleY(0.5);
  }

  &.is-row {
    @extend %fww;
    align-items: flex-start;
    .hor-cell-label {
      margin-right: j(10);
    }
    .hor-cell-value {
      justify-content: flex-end;
      span {
        @extend %tar;
      }
    }
  }

  &.is-clickable {
    @extend %cp;
    @extend %ao8;
  }

  &.is-column {
    @extend %fdc;
  }

  &.is-required:not(.is-no-asterisk) {
    .hor-cell-label {
      &:before {
        @extend %pa;
        left: j(-8);
        content: '*';
        color: $color-danger;
      }
    }
  }

  &.is-arrow {
    @extend %cp;
    @extend %ao8;
  }

  &.is-align-item-center {
    align-items: center;
  }

  &.is-ellipsis {
    .hor-cell-value {
      @extend %oh;
      span {
        @extend %twno;
        min-width: 0;
      }
    }
  }

  &.is-line-clamp {
    .hor-cell-value {
      span {
        padding-bottom: j(4);
        word-break: break-all;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: var(--hor-cell-line-clamp);
        -webkit-box-orient: vertical;
      }
    }
  }
}

.hor-cell-label {
  @extend %pr;
  @extend %df;
  @extend %aic;
  color: var(--hor-cell-text-color);
  span {
    padding: j(4) 0;
  }
}

.hor-cell-icon {
  margin-right: j(8);
  font-size: j(20);
}

.hor-cell-value {
  @extend %df1;
  @extend %df;
  @extend %aic;
  word-break: break-all;
  min-height: j(30);
  color: var(--hor-cell-value-color);

  span {
    @extend %df1;
    padding: j(4) 0;
  }
  i {
    margin-left: j(8);
    line-height: j(30);
  }
}

.hor-cell-arrow {
  @extend %bsb;
}