@layer components {
    .sw-update {
        /* A mount point only: the hidden bar must not take a gap in the page. */
        display: contents;

        & [hidden] {
            display: none !important;
        }

        /* Over the page rather than pushed into it: a release landing while
           somebody scrolls must not move the content under their thumb. */
        & .sw-update__bar {
            position: sticky;
            inset-block-start: 0;
            z-index: 20;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: space-between;
            gap: var(--space-2xs) var(--space-s);
            padding: var(--space-2xs) var(--space-s);
            background: var(--color-surface-raised);
            color: var(--color-text);
            border-block-end: 1px solid var(--color-border-strong);
        }

        /* An offer, not an alert: an icon and words, no colour of its own. */
        & .sw-update__notice {
            display: flex;
            align-items: center;
            gap: var(--space-2xs);
            margin: 0;

            & svg {
                flex: none;
                inline-size: 1.25em;
                block-size: 1.25em;
            }
        }

        & .sw-update__actions {
            display: flex;
            flex-wrap: wrap;
            gap: var(--space-2xs);
        }
    }
}