/* The notice: a block of text that tells the reader something about the screen it
   sits on, in the colour of a state.

   It uses the two forms of a state at once, the way the floating alert does: the
   tint as background with the text in navy on top, and the solid colour in a
   circle with the glyph, on the left. A block of text on the solid colour would be
   harder to read than the page around it. The attention circle carries its glyph
   in navy, because white on the yellow gives 1.67:1 and cannot be read. */

.sf-notice {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 6px;
    color: var(--sf-navy);
}

.sf-notice-icon {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Said on the glyph itself, not only on the circle: the theme paints every `i` of
   the platform a light grey, and a rule that matches beats inheritance. */
.sf-notice .sf-notice-icon > i,
.sf-notice .sf-notice-icon > svg {
    font-size: 1rem;
    color: inherit;
}

.sf-notice-body {
    flex: 1 1 auto;
    min-width: 0;
}

.sf-notice-body p {
    margin-bottom: 0.5rem;
    color: var(--sf-navy);
}

.sf-notice-body p:last-child {
    margin-bottom: 0;
}

.sf-notice-title {
    font-weight: 600;
}

.sf-notice-success {
    background-color: var(--sf-success-soft);
}

.sf-notice-success .sf-notice-icon {
    background-color: var(--sf-success);
    color: var(--sf-white);
}

.sf-notice-info {
    background-color: var(--sf-blue-bg);
}

.sf-notice-info .sf-notice-icon {
    background-color: var(--sf-blue);
    color: var(--sf-white);
}

.sf-notice-danger {
    background-color: var(--sf-danger-soft);
}

.sf-notice-danger .sf-notice-icon {
    background-color: var(--sf-danger);
    color: var(--sf-white);
}

.sf-notice-warning {
    background-color: var(--sf-warning-soft);
}

.sf-notice-warning .sf-notice-icon {
    background-color: var(--sf-warning-fill);
    color: var(--sf-navy);
}