:root {
  --toggle-width: 2.4em;
  --toggle-height: 1.1em;
  --toggle-border-width: 0px;
  --toggle-slider-border-width: 0px;
  --toggle-slider-width: calc(
    var(--toggle-height) - var(--toggle-border-width) - var(--toggle-slider-border-width)
  );
}

.toggle-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.toggle {
  position: relative;
  display: inline-block;
  width: var(--toggle-width);
  height: calc(var(--toggle-height));
  border-radius: calc(0.5 * var(--toggle-height));
  background-color: var(--color-bg);
  border: var(--toggle-border-width) solid white;
  outline: none;
  cursor: pointer;
  transition: background-color 0.3s;
}
.toggle.enabled {
  background-color: var(--color-librairie-martin);
}

.text {
  position: absolute;
  color: var(--color-text);
  font-size: 14px;
}
.enabled.text {
  left: auto;
  right: 10px;
}

.slider {
  width: var(--toggle-slider-width);
  height: var(--toggle-slider-width);
  border-radius: 50%;
  background-color: var(--color-text-dim);
  border: var(--toggle-slider-border-width) solid var(--color-bg);
  transition: transform 0.3s, border 0.3s, background-color 0.3s;
}
.slider.enabled {
  transform: translateX(
    calc(var(--toggle-width) - var(--toggle-slider-width) - var(--toggle-slider-border-width))
  );
  border: var(--toggle-slider-border-width) solid var(--color-librairie-martin);
  background-color: white;
}