@import "../vars";

.survey-preview-wrapper {
  font-size: @survey-creator-font-size;

  .icon-clipboard {
    color: @survey-creator-wrapper-question-border;
  }

  .survey-editor-wrapper {
    .survey-internal-previewer-wrapper {
      margin-top: 20px;

      .question-selection-counter {
        display: flex;
        align-items: center;
        padding: 0 20px 8px;
        color: var(---T3-, #70748C);
        font-feature-settings: 'liga' off, 'clig' off;
        font-family: "PingFang SC";
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 22px; /* 157.143% */

        .collapse-toggle-all {
          margin-right: 12px;
          font-size: 16px;
          color: @survey-creator-help-color;
          cursor: pointer;
          transition: transform 0.2s ease;
          flex-shrink: 0;

          &.collapse-toggle-all--collapsed {
            transform: rotate(180deg);
          }
        }

        &__num {
          color: var(---T4-, #262833);
          font-weight: 500;
          margin: 0 2px;
        }
      }

      .question-row {
        padding: 8px 0;

        .question-row-container {
          display: flex;
          flex-direction: row;
          margin: 0px 16px;
          border-radius: 4px;
          border: 1px solid var(---L2-, #DCDEE2);

          .question-row-container-left {
            display: flex;
            padding: 12px;
            align-items: center;
            gap: 10px;
            align-self: stretch;
            background: rgba(17, 9, 9, 0.04);
          }

          &:not(.question-row--selected):hover {
            border-radius: 4px;
            border: 1px solid var(---L2-, #DCDEE2);
            background: var(---F1-disable, #F7F7F7);
          }

          &.question-row--selected {
            border-radius: 4px;
            border: 1px solid var(--b-3, #7FB1DD);
            background: rgba(12, 81, 171, 0.04);

            .question-row-container-left {
              background-color: rgba(12, 81, 171, 0.08);
            }
          }

          .question-row-container-right {
            padding: 0 16px 16px 16px;
            flex: 1;

            .question-title-header {
              display: flex;
              align-items: flex-start;

              .collapse-toggle {
                flex-shrink: 0;
                margin-left: 8px;
                margin-top: 18px;
                font-size: 16px;
                color: @survey-creator-help-color;
                cursor: pointer;
                transition: transform 0.2s ease;

                &.collapse-toggle--collapsed {
                  transform: rotate(180deg);
                }
              }
            }

            .question-type-desc {
              font-size: @survey-creator-font-size-small;
            }
            
            .question-title {
              padding: 16px 0;
              display: flex;
              align-items: center;

              .star {
                color: red;
              }
    
              .number {
                color: @survey-creator-primary-color;
              }
    
              .content {
                font-size: @survey-creator-font-size-large;
                font-weight: @survey-creator-font-weight-500;
              }
    
              .max-score {
                color: @survey-creator-help-color;
                font-size: @survey-creator-font-size-small;
              }
            }
    
            &.sortable-chosen {
              cursor: copy;
            }
    
            .ivu-divider {
              .ivu-divider-inner-text {
                font-weight: 100;
              }
            }
    
            .question-row-move {
              margin-bottom: 20px;
            }
    
            .question-row-content {
              flex-grow: 1;
    
              .sub-question-title {
                padding: 16px 0;
    
                .number {
                  color: @survey-creator-primary-color;
                }
    
                .content {
                  font-size: @survey-creator-font-size;
                  font-weight: @survey-creator-font-weight-500;
                }
    
                .max-score {
                  color: @survey-creator-help-color;
                  font-size: @survey-creator-font-size-small;
                }
              }
    
              .question {
                .sub-question-title {
                  .sub-max-score {
                    color: @survey-creator-help-color;
                    font-size: @survey-creator-font-size-small;
                  }
                }
    
                .question-choice {
                  .choice-title {
                    font-size: @survey-creator-font-size;
                  }
    
                  .choice-score {
                    font-size: @survey-creator-font-size-small;
                    color: rgba(0, 0, 0, 0.45);
                  }
    
                  .jump-desc {
                    font-size: @survey-creator-font-size;
                    color: #FF7800;
                  }
                }
    
                .question-choice-horizontal {
                  width: fit-content;
                  margin-bottom: 8px;
                }
    
                .question-choice-vertical {
                  width: 100%;
                  height: 50px;
                  line-height: 50px;
                }
              }
            }
          }
        }

        .question-incomplete {
          border: 1px solid #ed4014;
          border-radius: 4px;
          .incomplete-tips {
            position: relative;
            left: -16px;
            top: -2px;
            padding: 2px 4px;
            background: #f85353;
            border-radius: 4px 0px 4px 0px;

            font-weight: 400;
            font-size: 12px;
            line-height: 18px;
            color: #ffffff;
          }
        }
      }
    }
  }

    .col-padding {
    padding: 10px;

    .evaluation-cards-default {
      width: 200px;
      height: 200px;

      .card-title {
        text-align: center;

        .icon {
          color: #e8eaec;
        }
      }

      .card-content {
        text-align: center;

        .ivu-tooltip {
          display: unset;
        }
        .ivu-tooltip-rel{
          display: unset;
        }

        .text {
          font-weight: 500;
          font-size: 18px;
          padding: 10px;
          white-space: nowrap;/*把文本强制显示在一行*/
          overflow: hidden;/*隐藏超出部分的文字*/
          text-overflow: ellipsis;/*超出显示省略号*/
        }
      }
    }

  }


}