/*
 * Notice: a short message in the flow of a page - a cart line that blocks
 * checkout, the reason the order cannot continue. The warning form marks
 * itself with a "!" as well as its colour. Decision 22.
 */

.shop-notice {
    display: flex;
    align-items: flex-start;
    gap: var(--shop-space-2);
    padding: var(--shop-space-3);
    border: 1px solid transparent;
    border-radius: var(--shop-radius-md);
    font-size: var(--shop-text-sm);
    line-height: var(--shop-leading-normal);
}

.shop-notice--warning {
    border-color: var(--shop-warning-border);
    background: var(--shop-warning-surface);
    color: var(--shop-warning-text);
}

.shop-notice--warning::before {
    content: "!" / "";
    display: grid;
    flex: none;
    place-items: center;
    width: 1.25rem;
    height: 1.25rem;
    margin-block-start: 0.05rem;
    border-radius: 50%;
    background: var(--shop-warning-text);
    color: var(--shop-surface);
    font-size: var(--shop-text-xs);
    font-weight: var(--shop-weight-bold);
    line-height: 1;
}

/* Information that bears on the decision (how a colour is sold, why it cannot
   be had): the accent's soft surface, no warning mark. Decision 23. */
.shop-notice--info {
    border-color: var(--shop-divider-accent);
    background: var(--shop-accent-soft);
    color: var(--shop-text);
}

/* The checkout switches notices on and off with the hidden attribute (the
   United Kingdom block, the remote-area surcharge); this class sets display, so
   it has to answer that at matching weight. */
.shop-notice[hidden] {
    display: none;
}

/* A link inside a notice (the checkout summary's list of fields to correct, the
   mailto in the United Kingdom block). Without this it takes combined.css's
   `a, .icon-click` colour - the legacy purple #75449e - which reaches every
   anchor this surface does not style. The states are spelled out because
   Foundation styles a:hover too, the same way .cms-prose does. */
.shop-notice a,
.shop-notice a:visited {
    color: var(--shop-accent);
}

.shop-notice a:hover,
.shop-notice a:focus {
    color: var(--shop-accent-strong);
}