.darkmode { float: right; // padding: 1em; min-width: 30px; position: relative; @media all and (max-width: 450px) { padding: 1em; } & > .toggle { display: none; box-sizing: border-box; } & svg { opacity: 0; position: absolute; width: 20px; height: 20px; top: calc(50% - 10px); margin: 0 7px; fill: var(--gray); transition: opacity 0.1s ease; } } .toggle:checked ~ label { & > #dayIcon { opacity: 0; } & > #nightIcon { opacity: 1; } } .toggle:not(:checked) ~ label { & > #dayIcon { opacity: 1; } & > #nightIcon { opacity: 0; } }