// ==== константы ====
$switch-width : 42px;
$switch-height: 24px;
$thumb-size   : 20px;
$padding      : 2px;
$anim         : .25s ease;

:host {
  display: block;
  /* опционально: тот же вертикальный зазор, что у PrimeNG .p-field */
  margin: 0 0 .5rem 0;
}
// ==== контейнер ====
.toggle-container {
  display: inline-flex;          // в одну строку
  align-items: center;
  cursor: pointer;
  outline: none;

  &.disabled {
    cursor: default;
    opacity: .4;
    pointer-events: none;
  }

  &:focus-visible .switch {
    box-shadow: 0 0 0 3px rgba(#3f51b5, .3);
  }
}

// ==== дорожка тумблера ====
.switch {
    width: $switch-width;
  min-width: $switch-width;     // фиксируем минимум
  flex: 0 0 $switch-width;      // запрещаем рост/сжатие
  height: $switch-height;
  border-radius: $switch-height;
  background: #9e9e9e;           // «выкл»
  position: relative;
  transition: background $anim;

  &.checked {
    background: #3f51b5;         // «вкл»

    .thumb {
      transform: translateX(calc(#{$switch-width - $thumb-size - 2 * $padding}));
    }
  }

  .thumb {
    position: absolute;
    top: $padding;
    left: $padding;
    width: $thumb-size;
    height: $thumb-size;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(#000, .4);
    transition: transform $anim;
  }
}

// ==== подпись ====
.label {
  display: inline-block;         // перекрываем global .p-field label {display:block;}
  margin-left: .5em;             // как у PrimeNG p-checkbox
  user-select: none;
}
