.toggle-container {
  width: 38.4px; /* 80% of 48px */
  height: 21.6px; /* 80% of 27px */
  position: relative;
  display: inline-block;
}

button {
  appearance: none;
  background-color: #ccc;
  width: 100%;
  height: 100%;
  position: relative;
  outline: none;
  border: none;
  cursor: pointer;
  border-radius: 21.6px; /* 80% of 27px */
  transition: background-color 0.2s ease;
}

.toggled button {
  background-color: #344861;
}

.toggle-knob {
  position: absolute;
  top: 1.6px; /* 80% of 2px */
  left: 1.6px; /* 80% of 2px */
  width: 19.2px; /* 80% of 24px */
  height: 19.2px; /* 80% of 24px */
  background-color: white;
  border-radius: 50%;
  transition: left 0.2s ease;
}

.toggled .toggle-knob {
  left: 17.6px; /* 80% of 22px */
}

.toggle-wrapper {
  display: flex;
  align-items: center;
}

.toggle-label {
  margin-right: 9.6px; /* 80% of 12px */
  font-size: 11.2px; /* 80% of 14px */
  height: 7px;
}