/* --------------------------------------------------------------------------
   Toggle switch  (wpsubs-toggle + wpsubs-toggle-ui)

   Usage:
     <input type="checkbox" class="wpsubs-toggle" id="my-toggle">
     <span class="wpsubs-toggle-ui" aria-hidden="true"></span>
   -------------------------------------------------------------------------- */
.wpsubs-toggle {
  position: absolute !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden;
  clip: rect(0 0 0 0);
  pointer-events: none;
}

.wpsubs-toggle + .wpsubs-toggle-ui {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 20px;
  border-radius: 999px;
  background: #cbd5e1;
  transition: all 0.2s cubic-bezier(0.27, 0.2, 0.25, 1.51);
  vertical-align: middle;
  cursor: pointer;
}

.wpsubs-toggle + .wpsubs-toggle-ui::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  transition: all 0.2s cubic-bezier(0.27, 0.2, 0.25, 1.51);
}

.wpsubs-toggle:checked + .wpsubs-toggle-ui {
  background: var(--wpsubs-brand);
}

.wpsubs-toggle:checked + .wpsubs-toggle-ui::after {
  transform: translateX(20px);
}

.wpsubs-toggle:focus + .wpsubs-toggle-ui {
  outline: none;
}

.wpsubs-toggle:disabled + .wpsubs-toggle-ui {
  background: #e5e7eb;
  cursor: not-allowed;
}

/* A toggle whose write is in flight. It shows the state it is moving to,
   dimmed and inert, until the server confirms. */
.wpsubs-toggle-busy {
  opacity: 0.55;
  pointer-events: none;
}