/**
 * Theme Toggle CSS
 * Theme toggle button styling and system preference support
 * @package Aistros
 * @since 1.2.0
 */

/* ========================================================================
   Header Theme Section & Toggle Button
   ======================================================================== */
.header-theme-section {
	position: absolute;
	top: 20px;
	inset-inline-end: 20px; /* Right side for LTR, left side for RTL */
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	z-index: 100;
}

.aistros-theme-toggle-wrapper {
	display: flex;
	align-items: center;
	margin: 0 5px;
}

.aistros-theme-toggle {
	background: none;
	border: 2px solid color-mix(in srgb, var(--c-base) 20%, transparent);
	border-radius: 50%;
	width: 40px;
	height: 40px;
	padding: 0;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	transition: all 0.3s ease;
	position: relative;
}

	.aistros-theme-toggle:hover {
		background-color: color-mix(in srgb, var(--c-base) 10%, transparent);
		border-color: var(--c-base);
		transform: scale(1.05);
	}

	.aistros-theme-toggle:active {
		transform: scale(0.95);
	}

	.aistros-theme-toggle .theme-icon {
		display: inline-block;
		transition: transform 0.3s ease;
		font-size: 1.2em;
		line-height: 1;
	}

	.aistros-theme-toggle:hover .theme-icon {
		transform: rotate(20deg) scale(1.1);
	}

/* ========================================================================
   Dark Mode Toggle Button Styling
   ======================================================================== */
body.dark-mode .aistros-theme-toggle {
	border-color: color-mix(in srgb, var(--c-light) 30%, transparent);
}

	body.dark-mode .aistros-theme-toggle:hover {
		background-color: color-mix(in srgb, var(--c-light) 15%, transparent);
		border-color: var(--c-light);
	}

/* ========================================================================
   System Preference Support
   Respects user's OS theme preference when theme is set to auto
   ======================================================================== */
@media (prefers-color-scheme: dark) {
	body.theme-preference-auto {
		color-scheme: dark;
	}
}

@media (prefers-color-scheme: light) {
	body.theme-preference-auto {
		color-scheme: light;
	}
}

/* ========================================================================
   Mobile Responsive
   ======================================================================== */
@media (max-width: 768px) {
	.aistros-theme-toggle-wrapper {
		margin: 0 10px;
	}

	.aistros-theme-toggle {
		width: 36px;
		height: 36px;
		font-size: 18px;
	}
}