@import '../../styles/index.less';

@prefixClsExtends: alitajs-dform-check-box-extends;

.alitajs-dform-check-box {
  .alitajs-dform-box-content {
    color: @alita-dform-value-color;
    padding-left: 15 * @hd;
    font-size: @alita-dform-value-font-size;

    // .am-flexbox:last-child {
    //   border-bottom: 0.5 * @hd solid #ddd;
    // }

    .alitajs-dform-box-wrapper {
      padding-bottom: 7 * @hd;
      padding-top: 7 * @hd;
      display: flex;
      flex-direction: row;
      align-items: center;

      &.alitajs-dform-box-wrapper-disabled {
        .alitajs-dform-box-botton {
          background: #d9d9d9;
        }
        .alitajs-dform-box-label {
          color: #aaa;
        }
      }

      .alitajs-dform-box-botton {
        width: 15 * @hd;
        height: 15 * @hd;
        border: 1 * @hd solid #d9d9d9;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        box-sizing: border-box;

        .alitajs-dform-box-tick {
          width: 4 * @hd;
          height: 8 * @hd;
          border-bottom: 2 * @hd solid #fff;
          border-right: 2 * @hd solid #fff;
          transform: rotate(40deg);
          margin-bottom: 2 * @hd;
        }
      }

      .alitajs-dform-box-botton-checked {
        // width: 19 * @hd;
        // height: 19 * @hd;
        background-color: @alita-dform-radio-color;
        border: 1 * @hd solid @alita-dform-radio-color;
        box-shadow: 0 0 2 * @hd @alita-dform-radio-color;
      }

      .alitajs-dform-box-label {
        padding-left: 8 * @hd;
        padding-right: 8 * @hd;
      }
    }
  }

  .@{prefixClsExtends} {
    &-animation {
      display: none;
    }
    &-entered {
      display: block;
    }

    color: rgba(173, 183, 204, 100);
    font-size: 13 * @hd;
    text-align: left;

    &-body {
      &-enter {
        .@{prefixClsExtends}-animation {
          display: block;
          max-height: 0;
        }
        &-active {
          .@{prefixClsExtends}-animation {
            display: block;
            max-height: 100vh;
            transition: max-height 200ms linear;
          }
        }
        &-done {
          .@{prefixClsExtends}-animation {
            display: block;
            max-height: 100vh;
          }
        }
      }

      &-exit {
        .@{prefixClsExtends}-animation {
          display: block;
          max-height: 100vh;
        }
        &-active {
          .@{prefixClsExtends}-animation {
            display: block;
            max-height: 1px;
            transition: max-height 200ms linear;
          }
        }
        &-done {
          .@{prefixClsExtends}-animation {
            display: none;
            max-height: 0;
          }
        }
      }
    }
  }
}
