@black: #464646;
@black2: #666;
@black3: #909090;
@black4: #d8d8d8;
@black5: #e6e6e6;

.components-question-item-render {
  position: relative;
  padding: 15px;

  &.item-folded {

    .header-fold {
      transform: rotate(180deg);
    }
  }

  &:not(:last-child) {
    &:after {
      content: '';
      position: absolute;
      height: 1px;
      left: 15px;
      right: 15px;
      bottom: 0;
      background-color: @black5;
      transform: scaleY(0.5);
      transform-origin: 0 100%;
    }
  }

  > * {
    & + * {
      margin-top: 10px;
    }
  }

  .item-header {
    display: flex;

    > * {
      & + * {
        margin-left: 5px;
      }
    }

    .header-mark {
      position: relative;

      .icon-orange {
        position: relative;
        padding-right: 10px;
        color: var(--theme-primary);
        text-shadow: 1px 1px 0 white;
        z-index: 1;
      }

      .icon-light {
        display: inline-block;
        position: absolute;
        top: 3px;
        left: 5px;
        color: var(--theme-primary);
        opacity: 0.2;
        transform: rotateY(180deg);
        transform-origin: center;
      }
    }

    .header-title {
      flex: 1;
      color: @black;
      font-size: 14px;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }

    .header-fold {
      color: @black4;
      transition: 0.2s;
      transform-origin: center;

      .icon {
        font-size: 14px;
      }
    }
  }

  .item-body {
    font-size: 13px;
    color: @black3;
  }
}