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

@include compatMixins.sky-default-overrides('.sky-tab-field-required') {
  --sky-override-required-color: var(--sky-highlight-color-danger);
  --sky-override-required-space: var(--sky-padding-half);
}

:host .sky-tab-field-required ::ng-deep .sky-vertical-tab-heading:after {
  /* TODO: remove this fallback `content` line, once support for content alt text is added to firefox & safari */
  content: '*';
  content: '*' / '';
  color: var(--sky-override-required-color, var(--sky-color-text-danger));
  padding-left: var(
    --sky-override-required-space,
    var(--sky-space-gap-label-s)
  );
}
