CSS nesting issues #20
Description
From nerdy.dev:
@layer base.normalize {
html {
--nav-height: 72px;
view-timeline: document-timeline;
&:has(.PostList .PostItem:focus-visible) {
scroll-padding-block-start: calc(var(--nav-height) + var(--size-5));
scroll-snap-type: y mandatory;
@media (min-width: 1024px) {
scroll-padding-block-start: calc(var(--nav-height) + var(--size-9));
}
}
}
body {
display: grid;
grid-template-rows: auto 1fr;
[data-theme=dark] &:has(.PostDetail .note){background:radial-gradient(circle at 35% 50%,rgba(5,88,255,.15),transparent 50%),radial-gradient(circle at 65% 50%,rgba(128,0,74,.15),transparent 50%),radial-gradient(circle at 50% 65%,rgba(74,128,0,.15),transparent 50%);background-attachment:fixed}@media (prefers-color-scheme:light){&:has(.BlogDetail){background-image:linear-gradient(to bottom,#fff 100vh,300vh,var(--surface-2));background-image:linear-gradient(to bottom,#fff 100vb,300vb,var(--surface-2))}}[data-theme=light] &:has(.BlogDetail){background-image:linear-gradient(to bottom,#fff 100vh,300vh,var(--surface-2));background-image:linear-gradient(to bottom,#fff 100vb,300vb,var(--surface-2))}[data-theme=dark] &:has(.BlogDetail){background-image:none}
}
}.sun-and-moon {
& > :is(.moon, .sun, .sun-beams) {
transform-origin: center center;
}
& > :is(.moon, .sun) {
fill: var(--icon-fill);
.theme-toggle:is(:hover,:focus-visible)>&{fill:var(--icon-fill-hover)}
}
& > .sun-beams {
stroke: var(--icon-fill);
stroke-width: 2px;
.theme-toggle:is(:hover,:focus-visible) &{stroke:var(--icon-fill-hover)}
}
[data-theme=dark] &{&>.sun{transform:scale(1.75)}&>.sun-beams{opacity:0}&>.moon>circle{transform:translateX(-7px);@supports (cx:1){cx:17;transform:translateX(0)}}}@media (prefers-reduced-motion:no-preference){&>.sun{transition:transform .5s var(--ease-elastic-3)}&>.sun-beams{transition:transform .5s var(--ease-elastic-4),opacity .5s var(--ease-3)}& .moon>circle{transition:transform .25s var(--ease-out-5);@supports (cx:1){transition:cx .25s var(--ease-out-5)}}[data-theme=dark] &{&>.sun{transform:scale(1.75);transition-duration:.25s;transition-timing-function:var(--ease-3)}&>.sun-beams{transform:rotate(-25deg);transition-duration:.15s}&>.moon>circle{transition-delay:.25s;transition-duration:.5s}}}
}