@import '@/assets/variables.less';
@import '@/assets/mixins.less';

.questionItem {
  margin: 8px auto;
  box-sizing: border-box;

  .questionContent {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    margin: 0 auto;
    text-align: left;
    position: relative;
    padding: 20px 22px;
    .width-media-query();

    &:hover {
      .editBtn {
        visibility: visible;
      }
      .page {
        &::after {
          content: '';
          width: 1px;
          background: var(--button-disabled-bg);
          position: absolute;
          left: -14px;
          height: 14px;
        }
      }
    }
    &.edit {
      border-radius: 16px;
      --border-width: 1px;
      .gradient-border();
    }

    .editBtn {
      visibility: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      transition-duration: 0.2s;
      margin-left: 16px;
      font-size: 20px;
      height: 24px;
      color: var(--text-gray-1);
      cursor: pointer;
      &:hover {
        color: var(--primary-color);
      }
    }

    .textareaWrapper {
      border: none !important;
      box-shadow: none !important;
      padding: 0;
      &::before {
        content: none !important;
      }
      &::after {
        content: none !important;
      }
      .currentCount {
        color: var(--text-gray-1);
      }
      .tools {
        margin-top: 18px;
      }
      .textarea {
        line-height: 24px;
        min-height: 24px !important;
      }
    }

    .showBtn {
      opacity: 1;
    }

    .btnGroup {
      display: flex;
      align-items: center;
      .btn {
        font-size: 20px;
        display: flex;
        cursor: pointer;
        align-items: center;
        justify-content: center;
        color: var(--text-gray-1);
        &:hover {
          color: var(--primary-color);
        }

        &:nth-child(1) {
          margin-right: 12px;
        }
      }
    }

    .showMoreBtn {
      width: 28px;
      height: 28px;
      margin-left: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: rgba(195, 197, 217, 0.5);

      .cateIcon {
        font-size: 14px;
        margin-right: 3px;
        color: rgba(195, 197, 217, 0.5);
      }
    }

    .disabled {
      cursor: not-allowed;

      .icon {
        color: var(--button-disabled-bg) !important;
      }
    }
    .icon.disabled {
      color: var(--button-disabled-bg) !important;

    }


    .page {
      position: relative;
      flex-shrink: 0;
      margin-left: 29px;
      font-size: 14px;
      line-height: 24px;
    }

    .avatar {
      flex-shrink: 0;
      margin-right: 16px;
      border-width: 0;
      cursor: default;
      display: inline-block;
      width: 24px;
      height: 24px;
      background: var(--answer-bg-color);
      margin-right: 18px;
      font-size: 18px;
      display: flex;
      justify-content: center;
      color: #fff;
      border-radius: 12px;
    }

    .content {
      width: 0px;
      flex: 1;
      color: var(--text-gray-1);
      white-space: pre-wrap;
      word-break: break-all;
      position: relative;
      font-size: 16px;
      line-height: 24px;

      .wrapTextArea {
        width: 100%;
      }
    }

    .edit {
      margin: 6px 0 0 16px;
      width: 40px;
      font-size: 16px;
      color: #c0c0d5;
      text-align: right;
      visibility: hidden;
      cursor: pointer;
    }

    .edit:hover {
      color: var(--primary-text-color);
    }
  }
}

.tooltip {
  :global {
    .ant-popover-inner {
      background: var(--primary-color);
      box-shadow: 0 4px 6px 0 var(--border-shadow-color);
      border-radius: 4px;
    }

    .ant-popover-inner-content {
      color: #fff;
      padding: 4px 12px;
      line-height: 24px;
    }

    .ant-popover-arrow-content {
      --antd-arrow-background-color: var(--primary-color);
      box-shadow: 0 4px 6px 0 var(--border-shadow-color);
    }
  }
}