@layer base {
  :host .dds-heading {
    font: var(--dds-heading-type);
    text-box: trim-both cap alphabetic;
    text-wrap: balance;
    overflow-wrap: break-word;
  }
}

@layer sizes {
  :host([size="xs"]) {
    --dds-heading-type: var(--dds-heading-type-xs);
  }

  :host([size="s"]) {
    --dds-heading-type: var(--dds-heading-type-s);
  }

  :host([size="m"]) {
    --dds-heading-type: var(--dds-heading-type-m);
  }

  :host([size="l"]) {
    --dds-heading-type: var(--dds-heading-type-l);
  }

  :host([size="xl"]) {
    --dds-heading-type: var(--dds-heading-type-xl);
  }

  :host([size="2xl"]) {
    --dds-heading-type: var(--dds-heading-type-2xl);
  }
}

@layer reset, base, sizes;
