.toggle__switch-label {
  background-color: #111;
  width: 50px;
  height: 26px;
  border-radius: 50px;
  position: relative;
  padding: 5px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.toggle__switch-label .toggle__switch-ball {
  background-color: #fff;
  width: 15px;
  height: 15px;
  position: absolute;
  left: 5px;
  top: 5px;
  border-radius: 50%;
  transition: transform 0.2s linear;
}
.themes__model-input {
  opacity: 0;
  position: absolute;
}

.toggle__switch-icon {
  color: #f39c12;
}

/* dark or light toggle */

#DarkModeCheckbox:checked + .DarkModeCheckbox-label .DarkModeCheckbox-ball {
  transform: translateX(24px);
}
/* custom thems toggle */
#customThemeCheckbox:checked
  + .customThemeCheckbox-label
  .customThemeCheckbox-ball {
  transform: translateX(24px);
}