.alert-banner {
    display: grid;
    min-height: var(--size-control);
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
    padding: var(--space-3);
    padding-left: var(--space-4);
    border: var(--border-width) solid var(--color-border);
    border-left: var(--space-3) solid var(--color-status-error);
    border-radius: var(--radius-small);
    background: var(--color-status-error-surface);
    box-shadow: var(--shadow-card);
}

/* The error styling is the base rule above, so success overrides it. */
.alert-banner--success {
    border-left-color: var(--color-status-success);
    background: var(--color-status-success-surface);
}

.alert-banner__status-icon {
    width: var(--space-4);
    height: var(--space-4);
}

.alert-banner__message {
    min-width: 0;
}

.alert-banner__dismiss {
    display: grid;
    width: var(--size-control);
    height: var(--size-control);
    padding: 0;
    margin: calc(-1 * var(--space-3));
    margin-left: 0;
    border: 0;
    border-radius: var(--radius-small);
    background: transparent;
    cursor: pointer;
    place-items: center;
}

.alert-banner__dismiss:hover {
    background: var(--color-page);
}

.alert-banner__dismiss:focus-visible {
    box-shadow: 0 0 0 var(--size-focus-ring) var(--color-focus-ring);
    outline: none;
}

.alert-banner__dismiss img {
    width: 0.5625rem;
    height: 0.5625rem;
}