/* ========================================================================= */
/* ==================== ПЕРЕКЛЮЧАТЕЛЬ ТЕМ - THEME.CSS =================== */
/* ========================================================================= */

/* ПЕРЕКЛЮЧАТЕЛЬ ТЕМ - БАЗОВЫЕ СТИЛИ */
.theme-toggle {
	position: relative !important;
	width: var(--chat-button-size) !important;
	height: var(--theme-button-height) !important;
	border-radius: 14px !important;
	cursor: pointer !important;
	transition: all 0.3s ease !important;
	border: none !important;
	outline: none !important;
	font-family: 'Inter', sans-serif !important;
	font-size: 10px !important;
	font-weight: 600 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	z-index: auto !important;
	top: auto !important;
	right: auto !important;
	left: auto !important;
	bottom: auto !important;
}

/* СВЕТЛАЯ ТЕМА - СТИЛИ КНОПКИ */
:root[data-theme="light"] .theme-toggle,
:root:not([data-theme]) .theme-toggle {
	background: #f2f2f7 !important;
	color: #666 !important;
	box-shadow:
		inset 0 2px 4px rgba(0, 0, 0, 0.1),
		0 2px 8px rgba(0, 0, 0, 0.15),
		0 1px 3px rgba(0, 0, 0, 0.2) !important;
}

/* ТЕМНАЯ ТЕМА - СТИЛИ КНОПКИ */
:root[data-theme="dark"] .theme-toggle {
	background: #2c2c2e !important;
	color: #999 !important;
	box-shadow:
		inset 0 2px 4px rgba(0, 0, 0, 0.3),
		0 4px 12px rgba(0, 0, 0, 0.6),
		0 2px 6px rgba(0, 0, 0, 0.4),
		0 1px 3px rgba(255, 255, 255, 0.05) !important;
}

/* ПОЛЗУНОК ПЕРЕКЛЮЧАТЕЛЯ */
.theme-toggle::before {
	content: '' !important;
	position: absolute !important;
	top: 2px !important;
	left: 2px !important;
	width: 24px !important;
	height: 24px !important;
	border-radius: 50% !important;
	transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
	z-index: 2 !important;
}

/* ИКОНКА ВНУТРИ ПОЛЗУНКА */
.theme-toggle::after {
	content: '' !important;
	position: absolute !important;
	top: 2px !important;
	left: 2px !important;
	width: 24px !important;
	height: 24px !important;
	line-height: 24px !important;
	text-align: center !important;
	font-family: 'Font Awesome 6 Free' !important;
	font-weight: 900 !important;
	font-size: 10px !important;
	opacity: 1 !important;
	transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
	z-index: 3 !important;
	pointer-events: none !important;
}

/* СТИЛИ ПОЛЗУНКА ДЛЯ СВЕТЛОЙ ТЕМЫ */
:root[data-theme="light"] .theme-toggle::before,
:root:not([data-theme]) .theme-toggle::before {
	background: linear-gradient(145deg, #ffffff, #f0f0f0) !important;
	box-shadow:
		0 2px 6px rgba(0, 0, 0, 0.15),
		0 1px 3px rgba(0, 0, 0, 0.2),
		inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
}

/* СТИЛИ ПОЛЗУНКА ДЛЯ ТЕМНОЙ ТЕМЫ */
:root[data-theme="dark"] .theme-toggle::before {
	background: linear-gradient(145deg, #1a1a1a, #000000) !important;
	box-shadow:
		0 3px 8px rgba(0, 0, 0, 0.5),
		0 1px 4px rgba(0, 0, 0, 0.4),
		0 0 0 1px rgba(255, 255, 255, 0.1),
		inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
}

/* СОСТОЯНИЯ ПЕРЕКЛЮЧАТЕЛЯ */

/* STATE LIGHT - ползунок слева, иконка солнца */
.theme-toggle.state-light::before {
	transform: translateX(0px) !important;
}

.theme-toggle.state-light::after {
	content: '\f185' !important;
	transform: translateX(0px) !important;
	color: #FF9500 !important;
	opacity: 1 !important;
}

/* STATE DARK - ползунок справа, иконка луны */
.theme-toggle.state-dark::before {
	transform: translateX(34px) !important;
}

.theme-toggle.state-dark::after {
	content: '\f186' !important;
	transform: translateX(34px) !important;
	color: #6B9FFF !important;
	opacity: 1 !important;
}

/* STATE AUTO - ползунок в центре, иконка полукруга */
.theme-toggle.state-auto::before {
	transform: translateX(18px) !important;
	opacity: 0.3 !important;
}

.theme-toggle.state-auto::after {
	content: '\f042' !important;
	transform: translateX(18px) !important;
	color: #007AFF !important;
	opacity: 1 !important;
}

/* ЦВЕТ ИКОНКИ AUTO В ТЕМНОЙ ТЕМЕ */
:root[data-theme="dark"] .theme-toggle.state-auto::after {
	color: #0A84FF !important;
}

/* HOVER ЭФФЕКТЫ */
.theme-toggle:hover {
	transform: translateY(-1px) !important;
}

:root[data-theme="light"] .theme-toggle:hover,
:root:not([data-theme]) .theme-toggle:hover {
	box-shadow:
		inset 0 2px 4px rgba(0, 0, 0, 0.1),
		0 4px 12px rgba(0, 0, 0, 0.2),
		0 2px 6px rgba(0, 0, 0, 0.25) !important;
}

:root[data-theme="dark"] .theme-toggle:hover {
	box-shadow:
		inset 0 2px 4px rgba(0, 0, 0, 0.4),
		0 6px 16px rgba(0, 0, 0, 0.7),
		0 3px 8px rgba(0, 0, 0, 0.5),
		0 1px 3px rgba(255, 255, 255, 0.1) !important;
}

/* Эффект при hover на AUTO */
.theme-toggle.state-auto:hover::after {
	color: #FF9500 !important;
	text-shadow: 0 0 8px rgba(255, 149, 0, 0.4) !important;
}

/* ACTIVE ЭФФЕКТЫ */
.theme-toggle:active {
	transform: translateY(0) !important;
}

:root[data-theme="light"] .theme-toggle:active,
:root:not([data-theme]) .theme-toggle:active {
	box-shadow:
		inset 0 2px 4px rgba(0, 0, 0, 0.15),
		0 1px 3px rgba(0, 0, 0, 0.2) !important;
}

:root[data-theme="dark"] .theme-toggle:active {
	box-shadow:
		inset 0 2px 4px rgba(0, 0, 0, 0.5),
		0 2px 6px rgba(0, 0, 0, 0.6),
		0 1px 3px rgba(255, 255, 255, 0.05) !important;
}

/* АДАПТИВНОСТЬ РАЗМЕРОВ */
@media (max-width: 640px) {
	.theme-toggle {
		width: var(--chat-button-size-mobile) !important;
		font-size: 9px !important;
	}

	.theme-toggle.state-dark::before {
		transform: translateX(30px) !important;
	}

	.theme-toggle.state-dark::after {
		transform: translateX(30px) !important;
	}

	.theme-toggle.state-auto::before {
		transform: translateX(16px) !important;
	}

	.theme-toggle.state-auto::after {
		transform: translateX(16px) !important;
	}
}

@media (max-width: 480px) {
	.theme-toggle {
		width: 48px !important;
		height: 26px !important;
		font-size: 8px !important;
	}

	.theme-toggle::before {
		width: 22px !important;
		height: 22px !important;
	}

	.theme-toggle::after {
		width: 22px !important;
		height: 22px !important;
		line-height: 22px !important;
		font-size: 9px !important;
	}

	.theme-toggle.state-dark::before {
		transform: translateX(24px) !important;
	}

	.theme-toggle.state-dark::after {
		transform: translateX(24px) !important;
	}

	.theme-toggle.state-auto::before {
		transform: translateX(13px) !important;
	}

	.theme-toggle.state-auto::after {
		transform: translateX(13px) !important;
	}
}

/* FOCUS СТИЛИ */
.theme-toggle:focus-visible {
	outline: 2px solid var(--color-primary) !important;
	outline-offset: 3px !important;
}

/* ACCESSIBILITY */
@media (prefers-reduced-motion: reduce) {

	.theme-toggle,
	.theme-toggle::before,
	.theme-toggle::after {
		transition: none !important;
	}
}

/* ПЕЧАТЬ */
@media print {
	.theme-toggle {
		display: none !important;
	}
}