.xh-checkbox-button {
  width: 100%;
  padding: 32px 0;

  &.paddingHorizontal {
    padding: 32px;
  }

  &.border {
    border-bottom: 1PX solid var(--border-color);
  }

  &-label {
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 30px;
    color: #333333;
    margin-bottom: 30px;
  }

  &-options {
    justify-content: space-between;
    flex-wrap: wrap;
    display: flex;

    &-item {
      display: flex;
      justify-content: center;
      font-size: 30px;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      color: #666;
      width: 48%;
      border-radius: 100px;
      padding: 10px 0;
      border: 2px solid #E0E0E0;
      background-color: #FFF;

      &:nth-child(n+3) {
        margin-top: 20px;
      }

      &.active {

        color: var(--color-primary);
        border: 2px solid var(--color-primary);
        background-color: #FFF;

        &.fill {
          border: 0;
          background-color: var(--color-primary);
          color: #FFF;
        }
      }

      &-label {
        overflow: hidden;
        text-overflow: ellipsis;
        text-wrap: nowrap;
        white-space: nowrap;
      }
    }
  }
}