Button/Toggler elements

<button class="button button_primary" disabled>Primary disabled</button>
<button class="button button_secondary" disabled>Secondary disabled</button>
<button class="button button_alternate" disabled>Alternate disabled</button>
<button class="button button_primary">Primary</button>
<button class="button button_secondary">Secondary</button>
<button class="button button_alternate">Alternate</button>

<!-- TOGGLER -->
<label class="toggler">
  <input class="toggler__input" type="checkbox" />
  <div class="toggler__base">
    <div class="toggler__switch"></div>
  </div>
  <span class="toggler__text">Off</span>
</label>

<label class="toggler">
  <input class="toggler__input" type="checkbox" checked />
  <div class="toggler__base">
    <div class="toggler__switch"></div>
  </div>
  <span class="toggler__text">On</span>
</label>

<label class="toggler">
  <input class="toggler__input" type="checkbox" disabled />
  <div class="toggler__base">
    <div class="toggler__switch"></div>
  </div>
  <span class="toggler__text">Disabled</span>
</label>

<label class="toggler">
  <input class="toggler__input" type="checkbox" disabled checked />
  <div class="toggler__base">
    <div class="toggler__switch"></div>
  </div>
  <span class="toggler__text">Disabled Checked</span>
</label>
/* Стилизация кнопки */

/* BUTTON */
.button {
  display: inline-block;
  height: 48px;
  min-width: 100px;

  border-radius: 8px;
  cursor: pointer;

  text-align: center;
  font-family: Roboto;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;

  padding: 15px 15px 14px 15px;

  transition: opacity 200ms ease-in-out, background 200ms ease-in-out;
}

/* PRIMARY */
.button_primary {
  color: var(--white);
  background: var(--primary);
  border-width: 0px;
}

.button_primary:hover {
  background: var(--primaryHover);
}

/* SECONDARY */
.button_secondary {
  color: var(--white);
  background: var(--secondary);
  border-width: 0px;
}
.button_secondary:hover {
  background: var(--secondaryHover);
}

/* ALTERNATE */
.button_alternate {
  color: var(--grey-4);
  background: var(--white);
  border: 1px solid var(--grey-3);
}
.button_alternate:hover {
  border-color: var(--alternateHover);
}

/* DISABLED */

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

.button_preview {
  margin-top: 15px;
}
 /* TOGGLER */ .toggler {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.toggler__input {
  position: absolute;
  opacity: 0;
  left: -100vw;
}

.toggler__text {
  color: var(--grey-4);
  font-family: Inter;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
}

.toggler__base {
  position: relative;
  width: 52px;
  height: 28px;
  background-color: var(--mainBackground);
  border: 1px solid var(--grey-2);
  border-radius: 16px;
  transition: background-color 0.3s ease-out;
}

.toggler__switch {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 24px;
  height: 24px;
  background-color: var(--grey-2);
  border-radius: 50%;
  transition-property: transform, background-color;
  transition-duration: 0.3s;
  transition-timing-function: ease-out, linear;
}

/* :focus */
.toggler__input:focus ~ .toggler__text {
  text-decoration: underline;
}

/* :checked */
.toggler__input:checked ~ .toggler__base {
  background-color: var(--primary);
  border-color: var(--primary);
}
.toggler__input:checked ~ .toggler__base .toggler__switch {
  background-color: var(--white);
  /* left: 26px; */
  transform: translateX(26px);
}

/* :disabled */
.toggler__input:disabled ~ .toggler__base {
  background-color: var(--grey-2);
  border-color: var(--grey-2);
}
.toggler__input:disabled ~ .toggler__base .toggler__switch {
  background-color: var(--grey-3);
}
.toggler__input:disabled:not(.toggler__input:checked) ~ .toggler__switch {
  left: 26px;
}