$prefix: "refund-list-item";

.#{$prefix} {
  width: 654rpx;

  --biz-ui-list-item-arrow-color: #b5b6b8;
  --biz-ui-list-item-normal-container-height: 96rpx;
  --biz-ui-list-i: 130rpx;
  --biz-ui-list-item-background-color: #ffffff;

  &-container {
    background-color: var(--biz-ui-list-item-background-color);
  }

  &-long-container {
    height: var(--biz-ui-list-item-long-container-height);
  }

  &-item-container {
    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
  }

  &-item-left {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
  }

  &-bottom-description {
    flex-direction: column;
    margin-top: 16rpx;
  }

  &-item-right {
    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: flex-end;
  }

  &-title {
    margin-right: 16rpx;

    color: var(--color-text1-3, #333);
    font-size: var(--p-body-1-font-size, 28rpx);
  }

  &-title-with-required {
    margin-right: 10rpx;
  }

  &-required {
    position: relative;
    top: 4rpx;
    align-content: center;
    margin-right: 16rpx;
    color: red;
  }

  &-description {
    display: block;
    overflow: hidden;
    max-width: 488rpx;
    margin-top: 8rpx;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--color-text1-2, #999);
    font-size: var(--p-caption-font-size, 24rpx);
  }

  &-extra {
    color: var(--color-text1-4, #b5b6b8);
    font-size: var(--p-body-1-font-size, 28rpx);
  }

  &-placeholder {
    color: var(--color-text1-3, #333);
  }

  &-arrow {
    margin-right: -12rpx;
    color: var(--biz-ui-list-item-arrow-color);
  }

  &-bottom-description {
    height: 40rpx;
    // margin-top: -20rpx;
    color: var(--color-text1-2, #999);
    font-size: var(--p-body-1-font-size, 28rpx);
    line-height: 40rpx;
  }
}