@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-sort-menu-heading') {
  --sky-override-sort-heading-color: var(--sky-text-color-deemphasized);
  --sky-override-sort-heading-margin: 4px;
  --sky-override-sort-heading-padding: 3px #{$sky-padding-double};
}

@include compatMixins.sky-modern-overrides('.sky-sort-menu-heading') {
  --sky-override-sort-heading-padding: #{$sky-theme-modern-space-sm
    $sky-theme-modern-space-lg};
}

.sky-sort-menu-heading {
  color: var(--sky-override-sort-heading-color, var(--sky-color-text-default));
  padding: var(
    --sky-override-sort-heading-padding,
    var(--sky-space-inset-pillarbox-1_2-top-m)
      var(--sky-space-inset-pillarbox-1_2-left-m)
      var(--sky-space-inset-pillarbox-1_2-bottom-m)
      var(--sky-space-inset-pillarbox-1_2-right-m)
  );
  margin: var(--sky-override-sort-heading-margin, 0);
  width: 100%;
}
