.btn-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 20px 0;
  transition: all 0.3s ease-in-out;
}

.switch {
  display: inline-block;
  position: relative;
  width: 140px; /* Уменьшенная ширина */
  height: 30px; /* Уменьшенная высота */
  transition: all 0.3s ease-in-out;
}

.switch input[type="checkbox"] {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
  transition: all 0.3s ease-in-out;
}

.switch .btn-color-mode-switch-inner {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #151515; /* Темный фон */
  border-radius: 30px; /* Закругленный вид */
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}

.switch .btn-color-mode-switch-inner:before {
  content: attr(data-on);
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 15%;
  font-size: 10px; /* Меньший размер текста */
  color: #fff; /* Белый текст */
  transition: all 0.3s ease-in-out;
}

.switch .btn-color-mode-switch-inner:after {
  content: attr(data-off); /* Текст на "кружке" */
  position: absolute;
  width: 60px; /* Уменьшенная ширина кружка */
  height: 24px; /* Уменьшенная высота кружка */
  top: 3px;
  left: 3px;
  background: #fff;
  color: #151515; /* Темный текст на светлом фоне */
  border-radius: 30px; /* Полный круг */
  text-align: center;
  line-height: 24px; /* Центровка текста */
  font-size: 10px; /* Меньший размер текста */
  font-weight: bold;
  transition: all 0.3s ease-in-out;
  box-shadow: 0px 0px 4px -2px #000;
}

.switch input[type="checkbox"]:checked + .btn-color-mode-switch-inner {
  background-color: #151515; /* Темный фон для включенного состояния */
}

.switch input[type="checkbox"]:checked + .btn-color-mode-switch-inner:before {
  content: attr(data-off);
  left: 10%;
  right: unset;
}

.switch input[type="checkbox"]:checked + .btn-color-mode-switch-inner:after {
  content: attr(data-on); /* Текст для включенного состояния */
  left: 75px; /* Сдвиг вправо */
  background: #fff; /* Светлый фон кружка */
  color: #3c3c3c; /* Темный текст */
}