Toggle label alignment problem

[vinoth2442]

Describe the bug
Toggle label positioned on top of the container

Desktop (please complete the following information):

• OS - iOS
• Browser - chrome
• Version - 102
  I have attached screenshot
  

[vinoth2442]

font: var(--body-1);

Not working inside shadow dom

[eduferfer]

Hi @vinoth2442 , the screenshot is not showing up, would you mind uploading it again?

[eduferfer]

font: var(--body-1);

Not working inside shadow dom

Is kor-styles.css loaded correctly?

[vinoth2442]

font: var(--body-1);

Not working inside shadow dom

Is kor-styles.css loaded correctly?

Yes loaded.
Problem here is need to add font: var(--body-1); inside :host .
It's now present inside body{}

[vinoth2442]

Hi @vinoth2442 , the screenshot is not showing up, would you mind uploading it again?

[vinoth2442]

any update about this issue?

[eduferfer]

any update about this issue?

Hi, I investigated the issue and it doesn't seem like the --body-1 font declaration is related to that, because even when I force font: unset; it still doesn't get misaligned.

The only way I found to reproduce the issue was applying css align-items: baseline;, so in this case could you please confirm that there is no interfering css inherited by the kor-toggle element?

If you have a link to the repo or code snippet I'd be happy to take a look as well.

[vinoth2442]

[vinoth2442]

host([size="body-1"]) {} is empty