// ********************************************
// container definition
$cmp-prefix: #{$prefix}-checkbox-group;
$el-container: #{$prefix}-form-element-checkbox;

.#{$cmp-prefix}-form-item-layout-wrapper{
  display: inline-flex;
  .#{$cmp-prefix} {
    padding-top: space(xs);
  }
}

.#{$cmp-prefix} {
  display: flex;
  flex-wrap: wrap;

  &--vertical {
    flex-direction: column;
    label {
      margin-bottom: space(xs);
    }
  }

  &--horizontal {
    .#{$el-container} {
      margin-right: space(l);
    }
  }
}

// Mobile
@include md {
  .#{$cmp-prefix} {
    &--horizontal {
      .#{$el-container} {
        margin-right: toMobile(space(s));
      }
    }
  }

  .#{$cmp-prefix}-form-item-layout-wrapper{
    .#{$cmp-prefix} {
      padding-top: toMobile(space(xs));
    }
  }
}