@layer base {
  :host {
    display: inline-flex;
    block-size: var(--dds-icon-size);
    inline-size: var(--dds-icon-size);

    .dds-icon {
      font-family: var(--dds-font-family-icons);
      font-style: normal;
      font-weight: normal;
      font-variant: normal;
      font-feature-settings: 'liga', 'clig', 'kern';
      white-space: nowrap;
      word-wrap: normal;
      text-transform: none;
      user-select: none;
      line-height: 1;
      color: inherit;
      letter-spacing: normal;
      font-size: var(--dds-icon-size);
      position: relative;
      vertical-align: top;
    }
  }
}

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

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

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

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

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

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