@layer components {
/* Toggle switch component */

.switch2 {
  block-size: 1.75em;
  border-radius: 2em;
  display: inline-flex !important;
  inline-size: 3em;
  position: relative;
  align-items: center;
}

.switch2:has(:focus-visible) .switch2__btn {
  box-shadow:
    0 0 0 var(--outline-size) var(--neutral-50),
    0 0 0 calc(var(--outline-size) * 2) var(--neutral-700);
}

.switch2__label {
  margin-top: -0.25em;
  margin-left: 3.4em;
  white-space: nowrap;
}

.switch2__input {
  block-size: 0;
  inline-size: 0;
  opacity: 0.1;
}

.switch2__btn {
  background-color: var(--primary-200);
  border-radius: 2em;
  cursor: pointer;
  inset: 0;
  position: absolute;
  transition: 150ms ease;
}

.switch2__btn::before {
  background-color: var(--primary-50);
  block-size: 1.35em;
  border-radius: 50%;
  content: "";
  inline-size: 1.35em;
  inset-block-end: 0.2em;
  inset-inline-start: 0.2em;
  position: absolute;
  transition: 150ms ease;
}

.switch2__input:disabled + .switch2__btn {
  background-color: var(--primary-200) !important;
  cursor: not-allowed;
}

.switch2__input:checked + .switch2__btn {
  background-color: var(--primary-500);
}

.switch2__input:checked + .switch2__btn::before {
  transform: translateX(1.2em);
}
}