/* =========================================================
   SS DECO - TOGGLE ☀ / 🌙 EN MENU
   ========================================================= */

.ss-theme-toggle-item {
	display: flex;
	align-items: center;
}

.ss-theme-toggle {
	appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	min-width: 76px;
	min-height: 38px;
	padding: 0 10px;
	border: 0;
	border-left: 1px solid var(--ss-header-line);
	background: transparent;
	color: var(--ss-header-text);
	font: inherit;
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
	transition:
		color 180ms ease,
		opacity 180ms ease,
		transform 180ms ease;
}

.ss-theme-toggle:hover {
	color: var(--ss-accent);
}

.ss-theme-toggle:focus-visible {
	outline: 2px solid var(--ss-accent);
	outline-offset: 3px;
}

.ss-theme-toggle__slash {
	opacity: 0.35;
	font-size: 13px;
}

.ss-theme-toggle__sun,
.ss-theme-toggle__moon {
	transition:
		opacity 180ms ease,
		transform 180ms ease;
}

html[data-ss-theme="light"] .ss-theme-toggle__sun {
	opacity: 1;
	transform: scale(1.05);
}

html[data-ss-theme="light"] .ss-theme-toggle__moon {
	opacity: 0.38;
	transform: scale(0.92);
}

html[data-ss-theme="dark"] .ss-theme-toggle__sun {
	opacity: 0.38;
	transform: scale(0.92);
}

html[data-ss-theme="dark"] .ss-theme-toggle__moon {
	opacity: 1;
	transform: scale(1.05);
}

/* Menu movil / offcanvas */
@media (max-width: 999px) {
	.ss-theme-toggle-item {
		width: 100%;
	}

	.ss-theme-toggle {
		width: 100%;
		justify-content: flex-start;
		min-height: 50px;
		padding-inline: 18px;
		border-left: 0;
		border-top: 1px solid var(--ss-header-line);
		font-size: 18px;
	}
}