:host {
  /**
   * @prop --lmvz-icon-color: The icon's color. This is inferred from the context (e.g. button) but can be overridden if needed, or when the icon is used standalone.
   */
  --lmvz-icon-color: var(--lmvz-component-color, var(--lmvz-semantic-color-on-surface-input-primary, #000000));
  /**
    * @prop --lmvz-icon-size: The icon's size. This is inferred from the context (e.g. button) but can be overridden if needed, or when the icon is used standalone.
    */
  --lmvz-icon-size: var(--lmvz-component-size, var(--lmvz-component-icon-size-md, clamp(1rem, 0.94rem + 0.26vw, 1.25rem)));

  display: inline-block;

  /* prevent additional whitespace */
  line-height: 0;

  svg {
    display: block;
    height: var(--lmvz-icon-size);
    width: auto;
  }

  svg path {
    stroke: var(--lmvz-icon-color);
    fill: none;
  }
}

:host([size='xs']) {
  svg {
    --lmvz-icon-size: var(--lmvz-component-icon-size-xs, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem));
  }
}

:host([size='sm']) {
  svg {
    --lmvz-icon-size: var(--lmvz-component-icon-size-sm, clamp(0.88rem, 0.84rem + 0.13vw, 1rem));
  }
}

:host([size='md']) {
  svg {
    --lmvz-icon-size: var(--lmvz-component-icon-size-md, clamp(1rem, 0.94rem + 0.26vw, 1.25rem));
  }
}

:host([size='lg']) {
  svg {
    --lmvz-icon-size: var(--lmvz-component-icon-size-lg, clamp(1.25rem, 1.19rem + 0.26vw, 1.5rem));
  }
}

:host([size='inherit']) {
  svg {
    height: var(--lmvz-component-size, inherit);
  }
}

:host([weight='light']) {
  svg path {
    stroke-width: 1;
  }
}

:host([weight='medium']) {
  svg path {
    /* TODO: use semantic token */
    stroke-width: 1.5;
  }
}

:host([weight='bold']) {
  svg path {
    /* TODO: use semantic token */
    stroke-width: 2;
  }
}

:host([weight='filled']) {
  svg path {
    stroke-width: 2;
    fill: var(--lmvz-icon-color);
  }
}