/**
 * Alerts
 * ======
 * Outcome and warning boxes: `ds-alert` plus one of the four states.
 *
 * The class was in use on three pages before this file existed, so every one
 * of those boxes rendered as bare paragraphs — a registration that had
 * succeeded looked exactly like the text around it, and a warning about real
 * funds carried no more weight than a caption. A message whose whole job is to
 * be noticed is worth styling.
 */

.ds-alert {
    padding: var(--space-4) var(--space-5);
    border: 1px solid var(--color-border-default);
    border-left-width: 3px;
    border-radius: var(--radius-md);
    background: var(--color-bg-tertiary);
    font-size: var(--font-size-sm);
    line-height: 1.55;
    color: var(--color-text-secondary);
}

/* The heading carries the verdict, so it reads in the state's own colour and
   the body stays quiet underneath it. */
.ds-alert strong {
    display: block;
    margin-bottom: .15rem;
    font-weight: 700;
    color: var(--color-text-primary);
}

.ds-alert p {
    margin: .4rem 0 0;
}

.ds-alert-success {
    border-color: color-mix(in srgb, var(--color-success) 45%, transparent);
    background: color-mix(in srgb, var(--color-success) 8%, var(--color-bg-tertiary));
}
.ds-alert-success strong { color: var(--color-success); }

.ds-alert-error {
    border-color: color-mix(in srgb, var(--color-error) 45%, transparent);
    background: color-mix(in srgb, var(--color-error) 8%, var(--color-bg-tertiary));
}
.ds-alert-error strong { color: var(--color-error); }

.ds-alert-warning {
    border-color: color-mix(in srgb, var(--color-warning) 45%, transparent);
    background: color-mix(in srgb, var(--color-warning) 8%, var(--color-bg-tertiary));
}
.ds-alert-warning strong { color: var(--color-warning); }

.ds-alert-info {
    border-color: color-mix(in srgb, var(--color-primary) 45%, transparent);
    background: color-mix(in srgb, var(--color-primary) 8%, var(--color-bg-tertiary));
}
.ds-alert-info strong { color: var(--color-primary); }

/* Long values inside an alert — a transaction signature, an address — wrap
   instead of pushing the box past the edge of the card that holds it. */
.ds-alert code,
.ds-alert .ds-alert-mono {
    font-family: var(--font-family-mono);
    font-size: var(--font-size-xs);
    overflow-wrap: anywhere;
}