@use 'libs/components/theme/src/lib/styles/variables' as *;
@use 'libs/components/theme/src/lib/styles/compat-tokens-mixins' as compatMixins;

@include compatMixins.sky-default-overrides('.sky-checkbox-group') {
  --sky-override-checkbox-group-content-space: #{$sky-space-sm};
  --sky-override-checkbox-group-content-with-hint-text-space: #{$sky-space-md};
  --sky-override-checkbox-group-hint-text-space: #{$sky-space-xs};

  .sky-checkbox-group-legend {
    .sky-checkbox-group-heading-text {
      line-height: 1.1;
    }
  }
}

@include compatMixins.sky-modern-overrides('.sky-checkbox-group') {
  .sky-checkbox-group-legend {
    .sky-checkbox-group-heading-text {
      line-height: 1.1;
    }
  }
}

:host {
  display: block;
}

.sky-checkbox-group-legend {
  h3,
  h4,
  h5 {
    margin: 0;
    display: inline-block;
  }
}

.sky-checkbox-group-inline,
.sky-checkbox-group-stacked {
  display: block;
}

.sky-checkbox-group {
  &:has(.sky-checkbox-group-legend:not(.sky-screen-reader-only)) {
    &:not(:has(.sky-checkbox-group-hint-text)) {
      .sky-checkbox-group-inline,
      .sky-checkbox-group-stacked {
        margin-top: var(
          --sky-override-checkbox-group-content-space,
          var(--sky-space-gap-form-s)
        );
      }
    }

    .sky-checkbox-group-hint-text {
      margin-top: var(
        --sky-override-checkbox-group-hint-text-space,
        var(--sky-space-gap-stacked_supplemental-s)
      );
    }
  }

  &:has(.sky-checkbox-group-hint-text) {
    .sky-checkbox-group-inline,
    .sky-checkbox-group-stacked {
      margin-top: var(
        --sky-override-checkbox-group-content-with-hint-text-space,
        var(--sky-space-gap-form-l)
      );
    }
  }
}
