:host {
  display: block;
  --wb-toggle__height: var(--wb-ds-field__height, 2rem);
  --wb-toggle__width: var(--wb-ds-field__width, 4rem);
}

.wb-toggle__wrapper {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}
.wb-toggle__wrapper .wb-toggle__loading {
  --wb-icon__size: var(--wb-toggle__height);
  --wb-icon__fill: var(--wb-toggle-loading__color, #d8d8d8);
  position: absolute;
  pointer-events: none;
  filter: invert(30%);
  transition: var(--wb-ds-animation-duration--default, 200ms) var(--wb-ds-animation-timing-function, ease-in-out);
  transition-property: transform;
}

.wb-toggle__input {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  margin: 0;
  cursor: var(--wb-ds-field__cursor--valid, pointer);
  opacity: var(--wb-ds-field__opacity, 1);
  position: relative;
  height: var(--wb-toggle__height);
  width: var(--wb-toggle__width);
  will-change: background, border-color, box-shadow;
  border-radius: 1000px;
  background: var(--wb-ds-field__background, #b8b8b8);
  transition: var(--wb-ds-field__transition, var(--wb-ds-animation-duration--default, 200ms)) var(--wb-ds-animation-timing-function, ease-in-out);
  transition-property: transform, border, background;
  padding-top: var(--wb-ds-field__bezel-top, 0);
  padding-right: var(--wb-ds-field__bezel-right, 0);
  padding-bottom: var(--wb-ds-field__bezel-bottom, 0);
  padding-left: var(--wb-ds-field__bezel-left, 0);
}
.wb-toggle__input:after {
  border-radius: 50%;
  content: "";
  top: 0;
  left: 0;
  position: absolute;
  height: var(--wb-toggle__height);
  width: var(--wb-toggle__height);
  box-sizing: border-box;
  transition: var(--wb-ds-animation-duration--default, 200ms) var(--wb-ds-animation-timing-function, ease-in-out);
  will-change: transform, background, border-color, outline-color;
  background: var(--wb-toggle-icon__background, var(--wb-ds-color-gray--white));
  --wb-toggle-icon__border: var(--wb-toggle-icon__border-width, 2px) solid
      var(--wb-toggle-icon__border-color, #5b5b5b);
  border: var(--wb-toggle-icon__border);
  --wb-toggle-icon__outline: var(--wb-toggle-icon__outline-width, 2px) solid
      var(--wb-toggle-icon__outline-color, transparent);
  outline: var(--wb-toggle-icon__outline);
}
.wb-toggle__input:disabled {
  opacity: 0.5;
  cursor: var(--wb-ds-field__cursor--disabled, not-allowed);
}
.wb-toggle__input:checked:after, .wb-toggle__input.interacted:checked:after {
  transform: translateX(calc(var(--wb-toggle__width) - var(--wb-toggle__height)));
}
.wb-toggle__input:checked ~ .wb-toggle__loading, .wb-toggle__input.interacted:checked ~ .wb-toggle__loading {
  transform: translateX(calc(var(--wb-toggle__width) - var(--wb-toggle__height)));
}