@import '~@cainiaofe/cn-ui-m-theme/token.px.scss';

$class-prefix: 'cn-ui-m';

.cn-ui-m-checkbox-group {
  display: flex;
  flex-direction: column;

  &--hoz {
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
  }
  &--left-small {
    margin-top: calc(-1 * #{$m-s-7});
    margin-bottom: calc(-1 * #{$m-s-7});
  }
  &--left-medium {
    margin-top: calc(-1 * #{$m-s-7});
    margin-bottom: calc(-1 * #{$m-s-7});
  }
  &--left-large {
    margin-top: calc(-1 * #{$m-s-8});
    margin-bottom: calc(-1 * #{$m-s-8});
  }
}

.cn-ui-m-checkbox {
  &-item--hoz-large {
    margin-right: $m-s-28;
  }
  &-item--hoz-medium {
    margin-right: $m-s-24;
  }
  &-item--hoz-small {
    margin-right: $m-s-20;
  }
}

.#{$class-prefix}-checkbox-group {
  &--tag {
    &.#{$class-prefix}-checkbox-group--ver {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: flex-start;
    }
    &.#{$class-prefix}-checkbox-group--hoz {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: flex-start;
      .#{$class-prefix}-checkbox {
        &-item--tag {
          margin-right: $m-s-8;
        }
      }
    }
  }
}