/**
 * Dark Mode Toggle Block - Styles
 *
 * @package kairo
 */

.kairo-dark-mode-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.kairo-dark-mode-toggle .kairo-toggle-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	cursor: pointer;
	background: transparent;
	border: none;
	color: var(--wp--preset--color--muted, #6B7280);
	gap: 8px;
	transition: color 0.2s ease, opacity 0.2s ease;
}

.kairo-dark-mode-toggle .kairo-toggle-btn:focus {
	outline: none;
	box-shadow: 0 0 0 2px var(--wp--preset--color--primary, #64748B);
	border-radius: 4px;
}

/* ========== SIMPLE STYLE ========== */
/* Clean icon-only appearance, inspired by GitHub, Twitter, and Notion. */
.kairo-dark-mode-toggle.is-style-simple .kairo-toggle-btn {
	padding: 4px;
	border-radius: 4px;
}

.kairo-dark-mode-toggle.is-style-simple .kairo-toggle-btn:hover {
	color: var(--wp--preset--color--contrast, #111827);
	opacity: 0.8;
}

.kairo-dark-mode-toggle.is-style-simple .kairo-toggle-btn:active {
	opacity: 0.6;
	transform: scale(0.95);
}

/* ========== DEFAULT STYLE (Bordered) ========== */
.kairo-dark-mode-toggle.is-style-default .kairo-toggle-btn {
	width: 36px;
	height: 36px;
	border: 1px solid var(--wp--preset--color--subtle, #E5E7EB);
	border-radius: 8px;
	background: var(--wp--preset--color--surface, #FAFAF9);
	transition: all 0.2s ease;
}

.kairo-dark-mode-toggle.is-style-default .kairo-toggle-btn:hover {
	background-color: var(--wp--preset--color--subtle, #E5E7EB);
	border-color: var(--wp--preset--color--muted, #9CA3AF);
	color: var(--wp--preset--color--contrast, #111827);
}

.kairo-dark-mode-toggle.is-style-default .kairo-toggle-btn:active {
	transform: scale(0.95);
}

/* ========== MINIMAL STYLE (Hover Background) ========== */
.kairo-dark-mode-toggle.is-style-minimal .kairo-toggle-btn {
	padding: 8px;
	border-radius: 8px;
	transition: all 0.2s ease;
}

.kairo-dark-mode-toggle.is-style-minimal .kairo-toggle-btn:hover {
	background-color: var(--wp--preset--color--subtle, #E5E7EB);
	color: var(--wp--preset--color--contrast, #111827);
}

.kairo-dark-mode-toggle.is-style-minimal .kairo-toggle-btn:active {
	transform: scale(0.95);
}

/* ========== PILL STYLE (Rounded Background) ========== */
.kairo-dark-mode-toggle.is-style-pill .kairo-toggle-btn {
	padding: 8px 12px;
	border-radius: 999px;
	background: var(--wp--preset--color--subtle, #E5E7EB);
	transition: all 0.2s ease;
}

.kairo-dark-mode-toggle.is-style-pill .kairo-toggle-btn:hover {
	background-color: var(--wp--preset--color--muted, #9CA3AF);
	color: var(--wp--preset--color--base, #FFFFFF);
}

.kairo-dark-mode-toggle.is-style-pill .kairo-toggle-btn:active {
	transform: scale(0.95);
}

/* ========== ICON VISIBILITY ========== */
.kairo-dark-mode-toggle .kairo-icon-sun {
	display: none;
}

.kairo-dark-mode-toggle .kairo-icon-moon {
	display: block;
}

[data-theme="dark"] .kairo-dark-mode-toggle .kairo-icon-sun {
	display: block;
}

[data-theme="dark"] .kairo-dark-mode-toggle .kairo-icon-moon {
	display: none;
}

/* Supports users' system preference for dark mode. */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .kairo-dark-mode-toggle .kairo-icon-sun {
		display: block;
	}
	
	:root:not([data-theme="light"]) .kairo-dark-mode-toggle .kairo-icon-moon {
		display: none;
	}
}

/* ========== DARK MODE ADJUSTMENTS ========== */
[data-theme="dark"] .kairo-dark-mode-toggle.is-style-default .kairo-toggle-btn {
	background: var(--wp--preset--color--surface, #1E293B);
	border-color: var(--wp--preset--color--subtle, #334155);
}

[data-theme="dark"] .kairo-dark-mode-toggle.is-style-default .kairo-toggle-btn:hover {
	background-color: var(--wp--preset--color--subtle, #334155);
	border-color: var(--wp--preset--color--muted, #64748B);
}

[data-theme="dark"] .kairo-dark-mode-toggle.is-style-minimal .kairo-toggle-btn:hover {
	background-color: var(--wp--preset--color--subtle, #334155);
}

[data-theme="dark"] .kairo-dark-mode-toggle.is-style-pill .kairo-toggle-btn {
	background: var(--wp--preset--color--subtle, #334155);
}

[data-theme="dark"] .kairo-dark-mode-toggle.is-style-pill .kairo-toggle-btn:hover {
	background-color: var(--wp--preset--color--muted, #64748B);
}

/* ========== LABEL ========== */
.kairo-dark-mode-toggle .kairo-toggle-label {
	font-size: 0.875rem;
	font-weight: 500;
}

/* ========== ICON TRANSITION ========== */
.kairo-dark-mode-toggle .kairo-icon-sun,
.kairo-dark-mode-toggle .kairo-icon-moon {
	transition: transform 0.3s ease, opacity 0.2s ease;
}

/* Smooth rotation animation when switching themes. */
[data-theme="dark"] .kairo-dark-mode-toggle .kairo-icon-sun {
	animation: kairo-icon-rotate 0.3s ease;
}

:root:not([data-theme="dark"]) .kairo-dark-mode-toggle .kairo-icon-moon {
	animation: kairo-icon-rotate 0.3s ease;
}

@keyframes kairo-icon-rotate {
	from {
		transform: rotate(-90deg);
		opacity: 0;
	}
	to {
		transform: rotate(0deg);
		opacity: 1;
	}
}