@layer reset, base, sizes;

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

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

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

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

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

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