Fix some styling of ha-switch (#3842)

If content is slotted it will get some margin to the toggle like the old switch.

src/components/entity/ha-entity-toggle.ts

@@ -153,7 +153,6 @@ class HaEntityToggle extends LitElement {
       }
       ha-switch {
         padding: 13px 5px;
-        margin: -4px -5px;
       }
     `;
   }

src/components/ha-switch.ts

@@ -1,4 +1,4 @@
-import { Constructor, customElement, CSSResult, css } from "lit-element";
+import { Constructor, customElement, CSSResult, css, query } from "lit-element";
 import "@material/mwc-switch";
 import { style } from "@material/mwc-switch/mwc-switch-css";
 // tslint:disable-next-line
@@ -8,23 +8,37 @@ const MwcSwitch = customElements.get("mwc-switch") as Constructor<Switch>;
 
 @customElement("ha-switch")
 export class HaSwitch extends MwcSwitch {
+  @query("slot") private _slot!: HTMLSlotElement;
+
   protected firstUpdated() {
     super.firstUpdated();
     this.style.setProperty("--mdc-theme-secondary", "var(--primary-color)");
+    this.classList.toggle(
+      "slotted",
+      Boolean(this._slot.assignedNodes().length)
+    );
   }
 
   protected static get styles(): CSSResult[] {
     return [
       style,
       css`
+        :host {
+          display: flex;
+          flex-direction: row;
+          align-items: center;
+        }
         .mdc-switch:not(.mdc-switch--checked) .mdc-switch__thumb {
           background-color: var(--paper-toggle-button-unchecked-button-color);
           border-color: var(--paper-toggle-button-unchecked-button-color);
         }
         .mdc-switch:not(.mdc-switch--checked) .mdc-switch__track {
-          background-color: var(--paper-toggle-button-unchecked-bar-color;
+          background-color: var(--paper-toggle-button-unchecked-bar-color);
           border-color: var(--paper-toggle-button-unchecked-bar-color);
         }
+        :host(.slotted) .mdc-switch {
+          margin-right: 24px;
+        }
       `,
     ];
   }

src/panels/config/cloud/account/cloud-alexa-pref.ts

@@ -136,9 +136,8 @@ export class CloudAlexaPref extends LitElement {
         color: var(--primary-color);
       }
       .switch {
-        margin: -4px 0;
         position: absolute;
-        right: 8px;
+        right: 24px;
         top: 32px;
       }
       .card-actions {

src/panels/config/cloud/account/cloud-google-pref.ts

@@ -141,9 +141,8 @@ export class CloudGooglePref extends LitElement {
         color: var(--primary-color);
       }
       .switch {
-        margin: -4px 0;
         position: absolute;
-        right: 8px;
+        right: 24px;
         top: 32px;
       }
       ha-call-api-button {

src/panels/config/cloud/account/cloud-remote-pref.ts

@@ -121,9 +121,8 @@ export class CloudRemotePref extends LitElement {
         color: var(--primary-color);
       }
       .switch {
-        margin: -4px 0;
         position: absolute;
-        right: 8px;
+        right: 24px;
         top: 32px;
       }
       .card-actions {

src/panels/lovelace/editor/config-elements/config-elements-style.ts

@@ -3,7 +3,7 @@ import { html } from "lit-element";
 export const configElementStyle = html`
   <style>
     ha-switch {
-      padding-top: 16px;
+      padding: 16px 0;
     }
     .side-by-side {
       display: flex;