Updated switch styling

[mtruj013]

Done

Updated switch styling as per visual update

Fixes #4249

QA

• Open demo
• See the the styling changes have been made accurately

Check if PR is ready for release

If this PR contains Vanilla SCSS code changes, it should contain the following changes to make sure it's ready for the release:

• PR should have one of the following labels to automatically categorise it in release notes:
  • Feature 🎁, Breaking Change 💣, Bug 🐛, Documentation 📝, Maintenance 🔨.
• Vanilla version in package.json should be updated relative to the most recent release, following semver convention:
  • if CSS class names are not changed it can be bugfix relesase (x.x.X)
  • if CSS class names are changed/added/removed it should be minor version (x.X.0)
  • see the wiki for more details
• Any changes to component class names (new patterns, variants, removed or added features) should be listed on the what's new page.
• Documentation side navigation should be updated with the relevant labels.

Screenshots

[webteam-app]

Demo starting at https://vanilla-framework-4254.demos.haus

[bartaz]

There seem to be a border around the handle (in switched off option) and blue border in switched on.
Also switched off version seems to have bit darker background than implemented (the same as slider grey?):

[bartaz]

Couple small fixes in the code needed.

Also, the switch (now smaller) seems to be too high compared to text:

I believe we would need to add align-items: center to the .p-switch in line 5 to fix that.

[bartaz]

Some adjustments for the $knob-size variable needed.

[lyubomir-popov]

Looks great.

[bartaz]

LGTM, thanks!