/*
 * Notification panel rows — Figma "notification-text" (4257:1006, instantiated at 4257:997).
 *
 * A row is a read toggle followed by a link. The toggle is a real submit button of its own form, so
 * archiving a notification works without JavaScript; the `notifications` Stimulus controller
 * intercepts the submit to update the panel in place.
 *
 * The row's own padding and its icon/text gap are `Spacing/xxs`, not `xs`: at 268×56 (4257:1006),
 * the tick sits at x=8/y=16 and the text starts at x=40 — 8px in from each edge of the row, with an
 * 8px gap between the two. The row never sets its own height; it comes out at 56px because the two
 * lines of text plus 8px top/bottom padding add up to that, matching the "ligne 56" measurement of
 * panel.css.
 */

.mo-notification {
    display: flex;
    align-items: center;
    gap: var(--mo-spacing-xxs);
    padding: var(--mo-spacing-xxs);
    border-radius: var(--mo-radius-sm);
}

/*
 * Hover (4257:998) tints the row *and* rings the unread dot: in the maquette the ring appears when
 * the row is pointed at, not only when the dot itself is.
 */
.mo-notification:hover {
    background-color: var(--mo-surface-action-light);
}

.mo-notification:hover .mo-notification__toggle {
    border-color: var(--mo-border-action);
}

.mo-notification__toggle {
    display: flex;
    width: var(--mo-scale-300);
    height: var(--mo-scale-300);
    flex: none;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: var(--mo-border-width-xs) solid var(--mo-border-disabled);
    border-radius: var(--mo-radius-round);
    background: none;
    color: var(--mo-icon-default-light);
    cursor: pointer;
}

.mo-notification__toggle:hover,
.mo-notification__toggle:focus-visible {
    border-color: var(--mo-border-action);
}

.mo-notification__toggle svg {
    display: none;
    width: var(--mo-scale-200);
    height: var(--mo-scale-200);
}

/*
 * The check mark is always in the markup — see the template — so that the `notifications`
 * controller only has to toggle this class after an async mark-as-read, instead of injecting an
 * icon client-side.
 */
.mo-notification--read .mo-notification__toggle svg {
    display: block;
}

.mo-notification--read .mo-notification__toggle {
    border-color: var(--mo-border-action);
    background-color: var(--mo-surface-action-dark);
}

.mo-notification__link {
    flex: 1 1 auto;
    color: var(--mo-text-body);
    font-size: var(--mo-font-size-body-sm);
    font-weight: var(--mo-font-weight-medium);
    line-height: var(--mo-line-height-body-sm);
    text-decoration: none;
}

.mo-notification__link:hover,
.mo-notification__link:focus-visible {
    text-decoration: underline;
}

.mo-notification__label {
    font-weight: var(--mo-font-weight-bold);
}

/* A read row stays in the panel until it leaves the display window, only quieter. */
.mo-notification--read .mo-notification__link {
    color: var(--mo-text-placeholder);
}

.mo-notification--read .mo-notification__label {
    font-weight: var(--mo-font-weight-medium);
}