favycon/components/dark-mode-toggle/index.module.scss

@import '../../styles/variables.scss';

.root {
	position: relative;
}

.label {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	cursor: pointer;
	user-select: none;
}

.checkbox {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	overflow: hidden;
	cursor: pointer;
	visibility: hidden;
	outline: none;
	appearance: none;
	-webkit-tap-highlight-color: transparent;
}

.sun,
.moon {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	transition: all 0.3s ease;

	path {
		transition: all 0.3s ease;
	}
}

:global(.light) {
	.sun {
		visibility: hidden;
		transform: translateX(-1px) scale(0);
	}

	.moon {
		transform: translate(0, 0) rotate(0) scale(1);
	}

	.sun,
	.moon {
		path {
			fill: #ccc;
		}
	}
}

:global(.dark) {
	.sun {
		transform: translateX(0) scale(1);
	}

	.moon {
		visibility: hidden;
		transform: translate(0, -2px) rotate(115deg) scale(0.4);
	}

	.sun,
	.moon {
		path {
			fill: $grey-dark;
		}
	}
}

:global(.light) .label {
	@media (pointer: fine) {
		&:hover path {
			fill: $link;
		}
	}
}

:global(.dark) .label {
	@media (pointer: fine) {
		&:hover path {
			fill: $link-dark;
		}
	}
}