@value (
  colorBackgroundTertiary,
  colorBorderSecondary,
  colorFillPrimary,
  colorFillDisabled,
  colorFocusPrimary
) from '../../styles/variables/_color.css';

@value (
  spaceXSmall,
  spaceSmall,
  spaceMedium
) from '../../styles/variables/_space.css';

@value (
  size500,
  sizeFluid
) from '../../styles/variables/_size.css';

.checkboxGroupContainer {
  display: flex;
  flex-direction: column;
  gap: spaceXSmall;
}

.vertical {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: spaceSmall;
}

.horizontal {
  display: flex;
  align-items: flex-start;
  gap: spaceMedium;
  flex-wrap: wrap;
  width: sizeFluid;
}

.horizontalFluid {
  display: flex;
  align-items: flex-start;
  gap: spaceMedium;
  flex-wrap: wrap;
  width: sizeFluid;
}