@layer root {
    #ruby-controls {
        align-items: baseline;
        display: flex;
        padding: calc(var(--body-item-spacing) / 2);
    }

    body:has(#ruby-controls > input[value=NONE]:checked) rt { display: none; }

    /* When ruby-controls is set to hidden, hide the ruby base and only show the <rt> */
    body:has(#ruby-controls > input[value=HIDDEN]:checked) ruby > span { display: none; }

    body:has(#ruby-controls > input[value=HIDDEN]:checked) rt {
        color: inherit;
        display: inline;
        font-size: inherit;
        white-space: inherit;
    }

    body:has(#ruby-controls > input[value=HIDDEN]:checked) :is(h1, h2, h3, h4, h5, h6) rt {
        font-family: var(--font-family-heading);
        font-weight: bold;
    }

    fieldset#ruby-controls input[type=radio]:not(:last-child) {
        margin-inline-end: 0.5rem;
    }

    fieldset#ruby-controls label:not(:last-child) {
        margin-inline-end: 2rem;
    }

    rt { transition: color 0.3s; }
    ruby:hover rt { transition: color 0.3s; }
}