/*
 * Callouts
 *
 * Not quite alerts, but custom and helpful notes for folks reading the docs.
 * Requires a base and modifier class.
 */
.callout {
    padding: 20px;
    margin: 20px 0;
    border: 1px solid #eee;
    border-left-width: 5px;
    border-radius: 3px;
    display: flex;
    align-items: baseline;
}
.callout h4 {
    margin-top: 0;
    margin-bottom: 5px;
}
.callout p:last-child {
    margin-bottom: 0;
}
.callout code {
    border-radius: 3px;
}

/* Tighten up space between multiple callouts */
.callout + .callout {
    margin-top: -5px;
}

.callout .fa {
    display: inline-flex;
    padding-right: 1rem;
    min-width: 2rem;
    max-width: 2rem;
}

.callout .error-message {
    padding: 0;
}

/* Variations */
.callout-danger {
    border-left-color: #ce4844;
}
.callout-danger h4, .callout-danger .fa {
    color: #ce4844;
}
.callout-warning {
    border-left-color: #aa6708;
}
.callout-warning h4, .callout-warning .fa {
    color: #aa6708;
}
.callout-info {
    border-left-color: #1b809e;
}
.callout-info h4, .callout-info .fa {
    color: #1b809e;
}
.callout-success {
    border-left-color: #008000;
}
.callout-success h4, .callout-success .fa {
    color: #008000;
}