.nest-toggle {
  user-select: none;
  position: relative;
  display: inline-block;
  vertical-align: middle;
}

.nest-toggle-inner {
  --toggle-w: var(--nest-toggle-w, 44px);
  --toggle-bg-color: var(--nest-toggle-bg-color, rgba(0, 0, 0, 0.17));
  --toggle-color-idle: var(--nest-toggle-color, #ffffff);
  --toggle-color: var(--toggle-color-idle);

  display: flex;
  align-items: center;
  border-radius: 999px;
  width: var(--toggle-w);
  height: var(--nest-toggle-h, 24px);
  background-color: var(--toggle-bg-color);
  color: var(--toggle-color);
}

.nest-toggle-switch {
  display: block;
  width: var(--nest-toggle-switch-size, 24px);
  height: var(--nest-toggle-switch-size, 24px);
  padding: var(--nest-toggle-switch-p, 3px);
  transition: translate 0.2s cubic-bezier(0.2, 0.64, 0.21, 1);
}

.nest-toggle-switch::after {
  content: '';
  background: currentColor;
  border-radius: 50%;
  display: block;
  width: 100%;
  height: 100%;
  box-shadow: var(--nest-toggle-switch-shadow, none);
}

.nest-toggle-input {
  cursor: pointer;
  z-index: 1;
  opacity: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  margin: 0;
}

.nest-toggle-input:checked + .nest-toggle-inner {
  --toggle-bg-color: var(--nest-toggle-bg-color-checked, #000000);
  --toggle-color: var(--nest-toggle-color-checked, var(--toggle-color-idle));
}

.nest-toggle-input:checked + .nest-toggle-inner .nest-toggle-switch {
  translate: calc(var(--toggle-w) - 100%) 0px;
}

@media (hover: hover) and (pointer: fine) {
  .nest-toggle-input:hover + .nest-toggle-inner {
    background: var(--nest-toggle-bg-color-hover, var(--toggle-bg-color));
    color: var(--nest-toggle-color-hover, var(--toggle-color));
  }

  .nest-toggle-input:checked:hover + .nest-toggle-inner {
    background: var(--nest-toggle-bg-color-checked-hover, var(--toggle-bg-color));
    color: var(--nest-toggle-color-checked-hover, var(--toggle-color));
  }
}

.nest-toggle .nest-toggle-input:disabled {
  cursor: not-allowed;
}

.nest-toggle .nest-toggle-input:disabled + .nest-toggle-inner {
  background: var(--nest-toggle-bg-color-disabled, var(--toggle-bg-color));
  color: var(--nest-toggle-color-disabled, var(--toggle-color));
  opacity: var(--nest-toggle-opacity-disabled, 50%);
}

.nest-toggle .nest-toggle-input:checked:disabled + .nest-toggle-inner {
  background: var(--nest-toggle-bg-color-checked-disabled, var(--toggle-bg-color));
  color: var(--nest-toggle-color-checked-disabled, var(--toggle-color));
  opacity: var(--nest-toggle-opacity-checked-disabled, 50%);
}