@import '@materials/questions/common/css/default.scss';

.isPc .choice-wrapper {
  .choice-box .choice-item {
    &:hover {
      background-color: $primary-color-light;
      transition: background-color 0.3s ease-in-out;
    }

    &:not(:hover) {
      background-color: transparent;
      transition: background-color 0.3s ease-in-out;
    }
  }

  .nest-box .choice-outer .choice-item .item-title {
    display: none !important;
  }
}

.choice-wrapper {
  font-size: 0;

  .choice-box {
    padding: 0 0.2rem !important;
    box-sizing: border-box;

    // .choice-content, .choice-item {
    //   width: 100%;
    // }

    &.vertical {
      display: flex;
      flex-direction: column;

      .choice-outer {
        width: 100%;
      }
    }

    &.horizontal {
      display: flex;
      flex-direction: row;
      align-items: flex-start;
      flex-wrap: wrap;

      .choice-outer {
        width: 50%;

        .question {
          padding-top: 0;
        }
      }
    }

    .choice-item {
      position: relative;
      display: inline-flex;
      align-items: flex-start;
      width: 100%;
      box-sizing: border-box;
      vertical-align: top;
      // height: .88rem;
      line-height: 0.4rem;
      padding: 0.22rem 0 0.22rem 0.05rem !important;
      margin-bottom: 0.08rem;
      cursor: pointer;

      .item-input {
        position: relative;
        vertical-align: top;
        width: 0.32rem;
        height: 0.32rem;
        margin: 0.24rem 0.24rem 0 0;
        border: 1px solid $border-color;
        border-radius: 2px;
        background-color: #fff;
        cursor: pointer;

        &[type='radio'] {
          border-radius: 100%;
        }

        &[type='radio']::before {
          border-radius: 50%;
        }

        &.print {
          border-radius: 0;
        }

        &.print:after {
          display: none;
        }

        &:disabled {
          border-color: $border-color !important;

          &::after {
            background: #eee;
          }

          & + label {
            color: #ccc !important;
          }
        }
      }

      .item-title {
        flex: 1;
        vertical-align: top;
        color: $font-color;
        font-size: $font-size;
        overflow: hidden;
        word-wrap: break-word;
        cursor: pointer;
      }

      &.is-checked {
        transition: all 0.3s ease-in-out;

        .item-title {
          color: $primary-color;
        }

        .qicon.qicon-gouxuan {
          display: inline-block;
          font-size: 0.32rem;
          border-color: $primary-color;
          background-color: $primary-color;
          color: #fff;
          border: none;
        }
      }

      &:not(.is-checked) {
        transition: all 0.3s ease-in-out;
        background-color: transparent;

        .item-title {
          color: $font-color;
        }
      }

      &.lastchild,
      &.last2child {
        margin-bottom: 0;
      }
    }

    .vertical {
      width: 100%;

      .item-title .label-img {
        width: 75%;
      }
    }
  }
}

.nest-box {
  justify-content: space-around;
  padding-left: 0 !important;

  .choice-outer {
    display: inline-block;
    text-align: center;

    .choice-item {
      display: inline-block;
      width: 100%;
      margin-bottom: 0;
      padding-left: 0 !important;

      .item-input {
        margin-right: 0;
        border-radius: 2px;

        &.ql-checked-input + .item-title {
          visibility: visible;
          height: auto;
          opacity: 1;
        }
      }

      .item-title {
        visibility: hidden;
        opacity: 0;
        display: block;
        height: 0.3rem;
        font-size: 0.23rem;
        margin-bottom: 0.06rem;
        width: 100%;
        color: $font-color;
        position: absolute;

        .item-title-text {
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
          display: block;
          height: auto;
          padding: 9px 0;
        }
      }
    }
  }
}
