/* Стили для радиокнопок */

.radio-group {
	display: flex; /* Используем flexbox для размещения */
	flex-direction: column; /* Вертикальное расположение элементов */
}

.radio-label {
	display: flex; /* Используем flexbox для размещения */
	align-items: center; /* Центрируем по вертикали */
	margin-bottom: 5px; /* Отступ между радиокнопками */
}

.radio-label input {
	display: none; /* Скрываем стандартные радиокнопки */
}

.radio-slider {
	width: 60px; /* Ширина радиокнопки */
	height: 30px; /* Высота радиокнопки */
	background-color: #ccc; /* Временное значение, будет заменено переменной */
	border-radius: 30px; /* Закругленные углы */
	position: relative; /* Относительное позиционирование */
	margin-right: 10px; /* Отступ справа */
	cursor: pointer; /* Указатель курсора при наведении */
	
	/* Используем переменные, если они определены, иначе — значения по умолчанию */
	background-color: 
		/* Если тема тёмная — фон переключателя темнее */
		/* Если тема светлая — серый */
		rgb(from var(--bg-secondary, #ffffff) r g b / 0.3);
}

/* Псевдоэлемент — ползунок */
.radio-slider:before {
	content: ""; /* Пустое содержимое для псевдоэлемента */
	position: absolute; /* Абсолютное позиционирование */
	height: 26px; /* Высота ползунка */
	width: 26px; /* Ширина ползунка */
	left: 2px; /* Положение слева */
	bottom: 2px; /* Положение снизу */
	background-color: var(--bg-primary, #f8f9fa); /* Цвет ползунка — светлый в светлой, тёмный в тёмной */
	border: 1px solid var(--border-color, #ddd); /* Лёгкая граница для чёткости */
	border-radius: 50%; /* Круглая форма ползунка */
	transition: transform .4s ease, background-color 0.3s; /* Плавный переход */
}

/* Состояние активной (включённой) радиокнопки */
.radio-label input:checked + .radio-slider {
	background-color: var(--btn-primary, #66bb6a); /* Цвет фона при включении — основной цвет кнопки или зелёный по умолчанию */
}

/* Сдвиг ползунка при включении */
.radio-label input:checked + .radio-slider:before {
	transform: translateX(30px);
	background-color: white; /* Ползунок остаётся светлым при активации */
}

/* Темная тема — переопределение цветов */
[data-theme="dark"] .radio-slider {
	background-color: rgb(from var(--bg-secondary) r g b / 0.3);
}

[data-theme="dark"] .radio-slider:before {
	background-color: var(--bg-primary);
	border-color: var(--border-color);
}

[data-theme="dark"] .radio-label input:checked + .radio-slider {
	background-color: var(--btn-primary, #66bb6a);
}