@layer components {
    .header-messages {
        position: relative;
        display: inline-grid;
        place-items: center;
        min-inline-size: var(--touch-target);
        min-block-size: var(--touch-target);
        color: var(--soil);
    }

    .header-messages:hover {
        color: var(--sky-deep);
    }

    .header-messages .icon {
        width: 22px;
        height: 22px;
    }

    .header-count-region {
        position: absolute;
        inset-block-start: 2px;
        inset-inline-end: 0;
    }

    .header-alert-link {
        display: inline-flex;
        align-items: center;
        gap: var(--space-1);
    }

    .header-count {
        display: inline-grid;
        place-items: center;
        min-inline-size: 18px;
        block-size: 18px;
        padding-inline: 4px;
        border-radius: var(--radius-round);
        background: var(--sky-deep);
        color: var(--paper);
        font-family: var(--font-data);
        font-size: 11px;
        font-weight: 600;
        line-height: 1;
    }
}