@layer atoms {
  .mobius-checkbox-group {
    display: grid;
    gap: var(--size-xs);

    & .mobius-checkbox-group__wrapper {
      display: grid;
      margin-bottom: var(--checkbox-group-wrapper-margin-bottom);
    }

    & .mobius-checkbox,
    & .mobius-checkbox-group__wrapper {
      margin-bottom: 0;
    }

    &.--is-horizontal .mobius-checkbox-group__wrapper {
      grid-template-columns: repeat(var(--checkbox-items-per-row), 1fr);
      gap: var(--checkbox-group-wrapper-gap-horizontal);
    }

    &.--is-vertical .mobius-checkbox-group__wrapper {
      gap: var(--checkbox-group-wrapper-gap-vertical);
    }

    &:where(.--is-optional) > :where(.mobius-label)::after {
      content: " (optional)";
    }
  }
}
