/* Callout — molecule. Spec: component-specs/callout.md */

.callout {
    --callout-accent: var(--status-running);

    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 20px;
    border-left: 3px solid var(--callout-accent);
    background: color-mix(in srgb, var(--callout-accent) 7%, var(--surface-canvas));
}

.callout-icon {
    flex-shrink: 0;
    fill: var(--callout-accent);
    color: var(--callout-accent);
}

.callout-content {
    font-size: var(--text-small-size);
    line-height: var(--text-small-line-height);
    color: var(--text-secondary);
    text-wrap: pretty;
}

.callout-content p {
    margin: 0;
}

.callout-content p + p {
    margin-top: 8px;
}

.callout-note,
.callout-honest {
    --callout-accent: var(--color-accent);
}

.callout-steer {
    --callout-accent: var(--color-highlight);
}

.callout-scope {
    --callout-accent: var(--color-accent);

    display: inline-flex;
    padding: 8px 12px;
}

.callout-scope .callout-content {
    color: var(--text-tertiary);
}