{"version":3,"file":"NotificationCenter.module.cjs","names":[],"sources":["../../../src/components/NotificationCenter/NotificationCenter.module.css"],"sourcesContent":[".panel {\n    display: flex;\n    flex-direction: column;\n    min-width: 0;\n    background-color: var(--tempest-bg);\n    color: var(--tempest-text);\n    font-family: var(--tempest-font-sans);\n}\n\n.header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--tempest-space-3);\n    padding: var(--tempest-space-3) var(--tempest-space-4);\n    border-bottom: 1px solid var(--tempest-border);\n}\n\n.title {\n    display: flex;\n    align-items: center;\n    gap: var(--tempest-space-2);\n    margin: 0;\n    font-size: var(--tempest-text-sm);\n    font-weight: var(--tempest-weight-semibold);\n}\n\n.headerAction {\n    padding: 0;\n    border: none;\n    background: none;\n    color: var(--tempest-primary);\n    font: inherit;\n    font-size: var(--tempest-text-xs);\n    cursor: pointer;\n    white-space: nowrap;\n}\n\n.headerAction:hover {\n    text-decoration: underline;\n}\n\n.headerAction:focus-visible {\n    outline: 2px solid var(--tempest-primary);\n    outline-offset: 2px;\n    border-radius: var(--tempest-radius-sm);\n}\n\n.list {\n    display: flex;\n    flex-direction: column;\n    margin: 0;\n    padding: 0;\n    list-style: none;\n    overflow-y: auto;\n}\n\n.item {\n    display: flex;\n    align-items: flex-start;\n    gap: var(--tempest-space-3);\n    padding: var(--tempest-space-3) var(--tempest-space-4);\n    border-bottom: 1px solid var(--tempest-border);\n}\n\n.item:last-child {\n    border-bottom: none;\n}\n\n/*\n * Unread is marked by a left bar plus a tinted background, never by colour alone\n * — the distinction has to survive a monochrome display and colour blindness.\n * `aria-current` on the row carries the same information non-visually.\n */\n.item.unread {\n    background-color: var(--tempest-surface);\n    box-shadow: inset 3px 0 0 0 var(--tempest-primary);\n}\n\n.icon {\n    display: flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n    width: 2rem;\n    height: 2rem;\n    border-radius: var(--tempest-radius-full);\n    background-color: var(--tempest-surface-2, var(--tempest-surface));\n    color: var(--tempest-text-muted);\n}\n\n.body {\n    display: flex;\n    flex: 1;\n    min-width: 0;\n    flex-direction: column;\n    gap: var(--tempest-space-1);\n}\n\n/*\n * The whole title/body block is one button so the hit target matches what the\n * user perceives as \"the notification\", instead of just its title text.\n */\n.trigger {\n    display: flex;\n    flex-direction: column;\n    gap: var(--tempest-space-1);\n    padding: 0;\n    border: none;\n    background: none;\n    color: inherit;\n    font: inherit;\n    text-align: left;\n    cursor: pointer;\n}\n\n.trigger:focus-visible {\n    outline: 2px solid var(--tempest-primary);\n    outline-offset: 2px;\n    border-radius: var(--tempest-radius-sm);\n}\n\n.itemTitle {\n    font-size: var(--tempest-text-sm);\n    font-weight: var(--tempest-weight-medium);\n    line-height: var(--tempest-leading-snug);\n}\n\n.itemBody {\n    color: var(--tempest-text-muted);\n    font-size: var(--tempest-text-sm);\n    line-height: var(--tempest-leading-normal);\n}\n\n.time {\n    color: var(--tempest-text-muted);\n    font-size: var(--tempest-text-xs);\n}\n\n.dismiss {\n    flex-shrink: 0;\n    width: 1.5rem;\n    height: 1.5rem;\n    padding: 0;\n    border: none;\n    border-radius: var(--tempest-radius-full);\n    background: none;\n    color: var(--tempest-text-muted);\n    font-size: var(--tempest-text-base);\n    line-height: 1;\n    cursor: pointer;\n}\n\n@media (hover: hover) and (pointer: fine) {\n    .dismiss:hover {\n        background-color: var(--tempest-surface);\n        color: var(--tempest-text);\n    }\n}\n\n.dismiss:focus-visible {\n    outline: 2px solid var(--tempest-primary);\n    outline-offset: 2px;\n}\n"],"mappings":";"}