/* Styling for aligned settings */
.setting-item {
  align-items: center;
  margin-bottom: 10px;
}

/* Toggle switch styles */
.toggle-switch {
  display: none; /* Hide the default checkbox */
}

.toggle-switch + label {
  display: inline-block;
  width: 30px; /* Width of the toggle switch */
  height: 14px; /* Height of the toggle switch */
  background-color: var(--text-color); /* Background color when off */
  border-radius: 16px;
  position: relative;
  cursor: pointer;
  transition: background-color 0.3s;
}

.toggle-switch:checked + label {
  background-color: var(--accent-color); /* Background color when on */
}

.toggle-switch:checked + label::after {
  left: 16px; /* Move the switch position */
}

.toggle-switch + label::after {
  content: "";
  position: absolute;
  width: 12px; /* Width of the switch knob */
  height: 12px; /* Height of the switch knob */
  border-radius: 50%;
  background: rgb(38, 86, 220); /* Use inherited color */
  transition: left 0.3s;
  top: 1px; /* Adjust this value for proper alignment */
  left: 2px;
}

/* Standard checkbox styles */
.standard-checkbox {
  margin-right: 10px; /* Space between checkbox and label */
}

/* Slider styles */
.setting-item input[type="range"] {
  margin-right: 10px; /* Space between slider and label */
  width: 100px; /* Custom width for slider */
}

.setting-item label {
  margin-left: 10px; /* Space between the input and label */
}

.setting-item span {
  margin-left: 10px; /* Space between label and value display */
  min-width: 50px;
  text-align: right;
}