label.onoff-ct {
  --switch-width: 40px;
  --switch-height: 24px;
  --switch-background: var(--color-gray-3);
  --switch-border-color: transparent;
  --switch-border-style: solid;
  --switch-border-width: 1px;
  --switch-text: inherit;
  --switch-dot-size: 14px;
  --switch-dot: var(--color-bg);
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-bottom: 0;
  padding: 1px 0; /* Height is 24px; bump to 26px like other widgets */
  vertical-align: middle;

  > .switch-on,
  > .switch-off,
  > input ~ .switch-toggle,
  > input ~ .switch-toggle::after {
    transition: all 300ms ease-in-out;
  }

  > .switch-on,
  > .switch-off {
    color: var(--switch-text);
    margin-left: 0.5em;
  }

  > input {
    opacity: 0;
    position: absolute;

    /* Base toggle graphic */
    ~ .switch-toggle {
      --switch-dot-offset-x: calc(var(--switch-dot-size)/3 - var(--switch-border-width));
      --switch-dot-offset-y: calc(50% - 14px / 2);
      /* Don't let the border draw over the background */
      background-clip: content-box;
      background: var(--switch-background);
      border-radius: var(--switch-height);
      border: var(--switch-border-width) var(--switch-border-style) var(--switch-border-color);
      box-shadow: inset 0 0 0 1px transparent;
      width: var(--switch-width);
      height: var(--switch-height);
      display: inline-block;
      position: relative;
      margin: 0;
      cursor: pointer;

      /* Dot graphic */
      &::after {
        background: var(--switch-dot);
        box-shadow: 0 0 var(--switch-dot-offset-x) rgba(0, 0, 0, 0.2);
        display: inline-block;
        content: "";
        height: var(--switch-dot-size);
        width: var(--switch-dot-size);
        border-radius: 50%;
        top: var(--switch-dot-offset-y);
        left: var(--switch-dot-offset-x);
        position: absolute;
        pointer-events: none;
      }
    }

    ~ .switch-off {
      --switch-text: var(--color-subtle-copy);
    }

    &:checked {
      ~ .switch-toggle {
        --switch-background: var(--color-link);
        --switch-dot-offset-x: calc(100% - var(--switch-dot-size) * 1.333333 + var(--switch-border-width));

        &:last-child {
          // Show a check if there's no label
          background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10.583 6.35'%3E%3Cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-width='.529' d='M2.252 3.365l.756.758L4.48 2.65' opacity='.75'/%3E%3C/svg%3E");
        }
      }
    }

    &:disabled ~ .switch-toggle {
      --switch-background: var(--color-subtle-copy);
      --switch-dot: var(--color-gray-3);
    }

    &:disabled ~ * {
      cursor: not-allowed;
    }

    /* Hide unused switch label */
    &:checked ~ .switch-off,
    &:not(:checked) ~ .switch-on {
      display: none;
    }
  }

  :disabled {
    ~ .switch-on,
    ~ .switch-off {
      --switch-text: var(--color-subtle-copy);
    }
  }

  /* Focus ring */
  :focus ~ .switch-toggle::before {
    /* Approximate Chrome's focus ring, for non-Firefox browsers */
    border: 2px solid rgba(0, 98, 220, 0.4);

    @-moz-document url-prefix() {
      /* Approximate Firefox's focus ring, for Firefox only */
      border: 1px dotted rgba(0, 0, 0, 0.75);
    }

    border-radius: calc(var(--switch-width) - 10px);
    position: absolute;
    content: '';
    top: -4px;
    bottom: -4px;
    left: -4px;
    width: calc(var(--switch-width) + 6px);
    transition: all 300ms ease-in-out;
    /* HACK: Keyboard has nothing to transition from, but hover does */
    /* (as it changes the ring to transparent and back). */
    /* So we delay the hover to not have the focus ring on hover out. */
    /* This makes the focus ring show up for keyboard users, but not on a mouse click. */
    transition-delay: 600s;
    z-index: 1;
  }

  /* Don't show the focus ring for mouse clicks (when hovering) */
  :focus:hover ~ .switch-toggle::before {
    border-color: transparent;
  }

  /* Subtly darken the inner part of the switch on hover */
  &:hover :not(:disabled) ~ .switch-toggle {
    box-shadow: inset 0 1px 5px 1px rgba(0, 0, 0, 0.15);
  }
}

h1 label.onoff-ct {
  vertical-align: bottom;
}
