@import './var.less';

.cell {
  &:last-child {
    .container {
      &::after {
        border: 0 solid @border-color;
      }
    }
  }
  .verticality {
    flex-direction: column;
    align-items: flex-start;

    .required {
      color: #f5222d;
      line-height: @cell-line-height;
    }

    .label {
      padding-bottom: 20px;
    }
  }

  .container {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    display: flex;
    line-height: @cell-line-height;
    color: @cell-font-color;
    font-size: @cell-font-size;
    padding: @cell-padding;
    background-color: @white;

    &::after {
      position: absolute;
      box-sizing: border-box;
      content: ' ';
      pointer-events: none;
      right: 16 * @hd;
      bottom: 0;
      left: 16 * @hd;
      transform: scaleY(0.5);
      border: @hd solid @border-color;
    }

    .left {
      box-sizing: border-box;
      display: flex;
      align-items: center;
      margin-right: 20px;

      .label {
        box-sizing: border-box;
        font-weight: 500;
        flex: 1;
        display: flex;
        align-items: center;

        .required {
          color: #f5222d;
          line-height: @cell-line-height;
        }

        .value {
          margin-right: 20px;
        }

        .description {
          margin-top: 10px;
          font-size: 24px;
          color: @gray-6;
        }
      }
    }

    .right {
      flex: 1;
      display: flex;
      justify-content: flex-end;
      color: @gray-6;

      .value_left {
        text-align: left;
      }

      .value_center {
        text-align: center;
      }
    }
  }

  .after {
    margin-left: 10px;
    display: inline-flex;
  }
}
