.app-checkbox-list {
  width: fit-content;
}

.app-checkbox-list-button {
  .ant-checkbox-group-item {
    border: 1px solid #DCDFE6;
    border-left: none;
    margin-right: 0;

    .ant-checkbox {
      display: none;
    }

    &:hover {
      color: @primary-color;
    }

    &:nth-child(1) {
      border: 1px solid #DCDFE6;
    }

    &.ant-checkbox-wrapper-checked {
      background-color: @primary-color;
      color: @btn-primary-color;
      border-color: @primary-color;
      box-shadow: -1px 0 0 0 @border-color-base;
    }
  }

  &.app-checkbox-list-medium {
    .ant-checkbox-group-item {
      padding: 10px 15px;
      text-align: center;
      align-items: center;

      &:nth-child(1) {
        border-radius: 4px 0 0 4px;
      }

      &:last-child {
        border-radius: 0 4px 4px 0;
      }
    }
  }

  &.app-checkbox-list-small {
    .ant-checkbox-group-item {
      padding: 5px 15px;
      text-align: center;
      align-items: center;

      &:nth-child(1) {
        border-radius: 4px 0 0 4px;
      }

      &:last-child {
        border-radius: 0 4px 4px 0;
      }
    }
  }

  &.app-checkbox-list-mini {
    .ant-checkbox-group-item {
      padding: 4px 10px;
      text-align: center;
      align-items: center;

      &:nth-child(1) {
        border-radius: 4px 0 0 4px;
      }

      &:last-child {
        border-radius: 0 4px 4px 0;
      }
    }
  }
}

.app-checkbox-list-border {
  .ant-checkbox-group-item {
    border: 1px solid #DCDFE6;
    padding: 3px 10px 3px 10px;
    border-radius: 4px;

    &.ant-checkbox-wrapper-checked {
      border-color: @primary-color;

      >span {
        color: @primary-color;
      }
    }
  }
}