.toggle-setting {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
  
}

.toggle-setting + label {
  position: relative;
  display: inline-block;
  width: 24px;
  height: 14px;
  background: #ccc;
  border-radius: 18px;
  transition: background 0.2s ease;
  cursor: pointer;

  &::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 10px;
    height: 10px;
    background: white;
    border-radius: 50%;
    transition: transform 0.2s ease;
  }
}

.toggle-setting:checked + label{
  background: var(--color-purple);

  &::after {
    transform: translateX(10px);
  }
}