:host {
  /* theme */
  --background: var(--manifold-grayscale-15);
  --border: 1px solid var(--manifold-grayscale-05);
  --knob-background: var(--manifold-grayscale-100i);

  /* on */
  --background-on: var(--manifold-color-primary);
}

.wrapper {
  display: inline-grid;
  grid-gap: 1em;
  grid-template-areas: 'toggle label';
  -webkit-box-align: center;
          align-items: center;
  justify-items: center;
}

input,
.toggle {
  grid-area: toggle;
}

input {
  opacity: 0;
}

.label {
  grid-area: label;
}

.toggle {
  --size: 1.5em;
  --spacing: 0.2em;
  --gap: calc(var(--size) / 2);

  display: grid;
  grid-gap: var(--gap);
  grid-template-areas: 'off on';
  width: calc(var(--size) * 2.5);
  height: var(--size);
  padding: var(--spacing);
  background: var(--background);
  border: var(--border);
  border-radius: 2.5em;
  -webkit-transition: opacity 200ms;
  transition: opacity 200ms;
  pointer-events: none;
  will-change: opacity
}

.toggle::before {
    grid-area: off;
    box-sizing: border-box;
    background: var(--knob-background);
    border-radius: 50%;
    box-shadow: 0 0 0.1em 0.05em rgba(0, 0, 0, 0.1);
    -webkit-transition: -webkit-transform 100ms ease-in-out;
    transition: -webkit-transform 100ms ease-in-out;
    transition: transform 100ms ease-in-out;
    transition: transform 100ms ease-in-out, -webkit-transform 100ms ease-in-out;
    content: '';
  }

input:checked + .toggle {
  background: var(--background-on)
}

input:checked + .toggle::before {
    -webkit-transform: translateX(calc(var(--size) + var(--gap)));
            transform: translateX(calc(var(--size) + var(--gap)));
  }

input:focus + .toggle,
input:active + .toggle {
  border-color: var(--background-on);
  box-shadow: 0 0 1em 0.1em rgba(var(--manifold-c-blue-rgb), 0.3);
}

input:disabled {
  pointer-events: none
}

input:disabled + .toggle {
    opacity: 0.5;
  }