label.toggle {
  display: inline-block;
  margin: 0;
  padding: 0;
  border-radius: 5px;
}

label.toggle input[role="switch"] {
  opacity: 0;
  width: 0;
  height: 0;
}

label.toggle .toggle__label {
  vertical-align: super;
}

label.toggle .toggle__label {
  vertical-align: super;
}

label.toggle .toggle__state {
  display: inline-block;
  user-select: none;
}

label.toggle .toggle__container {
  position: relative;
  top: 2px;
  display: inline-block;
  border: 2px solid black;
  width: 55px;
  height: 30px;
  border-radius: 20px;
}

label.toggle input[role="switch"]:checked ~ .toggle__state > .toggle__container {
    background-color: var(--primary_color_dark);
}

label.toggle .toggle__position {
    position: absolute;
    top: 50%;
    left: 0;
    right: unset;
    transform: translateY(-50%);
    margin-inline: 5px;
    display: inline-block;
    height: 75%;
    aspect-ratio: 1 / 1;
    background: #fff;
    border-radius: 2em;
    border: 1px solid #1a1a1a;
    transition: all 0.3s;
}

label.toggle .toggle__position::after {
    content: url("data:image/svg+xml,%3Csvg%20width%3D%2228%22%20height%3D%2220%22%20viewBox%3D%22-2%20-4%2032%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20transform%3D%22scale(2)%22%20d%3D%22M5.3228%207.45778L12.5576%200.386719L13.6706%201.47457L5.3228%209.63347L0.314125%204.73816L1.42717%203.65032L5.3228%207.45778Z%22%20fill%3D%22%231A1A1A%22%2F%3E%3C%2Fsvg%3E");
    position: absolute;
    left: 50%;
    top: calc(50% + 2px);
    transform: translate(-50%, -50%) scale(0.4);
    opacity: 0;
    transition: opacity 0.3s, scale 0.3s;
}

label.toggle input[role="switch"]:checked ~ .toggle__state > .toggle__container > .toggle__position {
    transform: translate(calc(-100% - 10px), -50%);
    left: 100%;
}

label.toggle input[role="switch"]:checked ~ .toggle__state > .toggle__container > .toggle__position > span::after {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.7);
}

label.toggle:hover {
    cursor: pointer;
}

label.toggle:focus-visible {
  padding: .25rem;
}