/* TODO: remove scaffolding */
label:has(input[role="switch"]) {
   display: flex;
   flex-direction: row;
   position: relative;
   padding-left: 2.25em;
}

/* TODO: extract aria role switch to theme basis or reset */
/* switch background */
label:has(input[role="switch"]):before {
   position: absolute;

   left: 0;
   box-shadow: 1px 1px 4px inset rgba(0, 0, 0, 0.5);
   width: 2em;
   height: 1em;
   border-radius: 1em;
   border: 1px solid var(--colour-brand2);

   background-color: var(--colour-canvas);

   content: '';
}

/* switch knob */
label:has(input[role="switch"]):after {
   position: absolute;

   border-radius: 1em;
   width: 1em;
   height: 1em;

   left: 0;

   background: var(--colour-brand1);

   content: '';

   transition-property: left, right;
   transition-duration: 200ms;
   transition-timing-function: ease-out;
}

label:has(input[role="switch"]:checked):after {
   left: 1em;
}

/* TODO: extract to theme basis  */
summary > :where(h1, h2, h3, h4, h5, h6) {
   /* if full-block, will break to separate line from details marker */
   display: inline-block;
}

/* TODO: extract to theme basis. only do the first two, sometimes h3 onward could legitimately have a floated aside or image */
h1, h2 {
   clear: both;
}

/* TODO: extract to theme basis? would be nice to have a semantic node for the subhead */
:where(h1, h2, h3, h4, h5, h6) .subhead {
   display: block;
   font-size: smaller;
}

/* TODO: remove when reset bug is fixed. */
a,
label {
   max-width: fit-content;
   align-self: unset;
}