: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));

  display: inline-block;

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

  svg {
    display: block;
  }

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

:host([size='xs']) {
  svg {
    width: var(--lmvz-component-icon-size-xs, clamp(0.75rem, 0.69rem + 0.26vw, 1rem));
    height: var(--lmvz-component-icon-size-xs, clamp(0.75rem, 0.69rem + 0.26vw, 1rem));
  }
}

:host([size='sm']) {
  svg {
    width: var(--lmvz-component-icon-size-sm, clamp(0.88rem, 0.81rem + 0.26vw, 1.13rem));
    height: var(--lmvz-component-icon-size-sm, clamp(0.88rem, 0.81rem + 0.26vw, 1.13rem));
  }
}

:host([size='md']) {
  svg {
    width: var(--lmvz-component-icon-size-md, clamp(1rem, 0.88rem + 0.52vw, 1.5rem));
    height: var(--lmvz-component-icon-size-md, clamp(1rem, 0.88rem + 0.52vw, 1.5rem));
  }
}

:host([size='lg']) {
  svg {
    width: var(--lmvz-component-icon-size-lg, clamp(1.5rem, 1.38rem + 0.52vw, 2rem));
    height: var(--lmvz-component-icon-size-lg, clamp(1.5rem, 1.38rem + 0.52vw, 2rem));
  }
}

:host([size='inherit']) {
  svg {
    width: inherit;
    height: 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);
  }
}
