@layer components {
    /* A mount point; the visible parts are the states inside it. */
    .install {
        display: contents;
    }

    /* Guards the `hidden` attribute against the display values below (author CSS beats the
       user-agent `[hidden] { display: none }` — see UI/SwUpdate for the bug this caused). */
    .install__offer[hidden],
    .install__manual[hidden] {
        display: none;
    }

    .install__offer {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-1);
    }

    .install__note,
    .install__manual {
        display: flex;
        align-items: center;
        gap: var(--space-2);
        margin: 0;
        color: var(--color-neutral-700);
        font-size: var(--text-s);

        & svg {
            flex: none;
            font-size: 1.25rem;
        }
    }
}