@import '@/styles/common.less';
@import '@/styles/variables.less';

.profile-checkbox {
  &__group {
    width: 100%;
    height: 100%;
    .flex-row();
    flex-wrap: wrap;
    gap: 24px;
  }

  &__item {
    flex: 0 1 auto;
    padding: 34px 36px;
    line-height: 32px;
    border-radius: 16px;
    border: 2px solid #fff;
    background: #fff;
    margin-right: 0;
    margin-bottom: 0;
    box-sizing: border-box;
    &.active {
      background: rgba(109, 61, 245, 0.12);
      border: 2px solid #6d3df5;

      .taroify-checkbox__label {
        color: #6d3df5;
      }
    }

    .taroify-checkbox__label {
      line-height: 32px;
      margin-left: 0;
    }
  }
}