.Switcher {
  display: inline-flex;
  align-items: center;
  position: relative;
  margin: 0;

  &.disabled {
    pointer-events: none;
    opacity: 0.5;
  }

  &.inactive {
    pointer-events: none;
  }

  body.animation-level-0 &,
  &.no-animation {
    .widget,
    .widget::after {
      transition: none !important;
    }

    .widget:active:after {
      width: 1.125rem;
    }
  }

  input {
    height: 0;
    width: 0;
    visibility: hidden;
    position: absolute;
    z-index: var(--z-below);
    opacity: 0;
  }

  .widget {
    cursor: pointer;
    text-indent: -999px;
    width: 2.125rem;
    height: 0.875rem;
    background-color: var(--color-gray);
    display: inline-block;
    border-radius: 0.5rem;
    position: relative;
    transition: background-color 0.2s ease-in;
  }

  .widget:after {
    content: "";
    position: absolute;
    top: -0.125rem;
    left: 0;
    width: 1.125rem;
    height: 1.125rem;
    background-color: var(--color-background);
    border-radius: 0.75rem;
    /* stylelint-disable-next-line plugin/no-low-performance-animation-properties */
    transition: border-color 0.2s ease-out;
    border: 0.125rem solid var(--color-gray);
  }

  input:checked + .widget {
    background: var(--color-primary);
  }

  input:checked + .widget:after {
    left: calc(100% - 1.125rem);
    transform: translateX(calc(-100% + 1.125rem));
    border-color: var(--color-primary);
  }

  .widget:active:after {
    width: 1.25rem;
  }
}