.alert {
    padding: $base-spacing-unit;
    margin-bottom: $base-spacing-unit;
    border: 1px solid transparent;

    > p,
    > ul {
        margin-bottom: 0;
    }

    > p + p {
        margin-top: $base-spacing-unit;
    }

    &.alert--success {
        color: map-get($colors, 'success');
        border-color: map-get($colors, 'success');
    }

    &.alert--info {
        color: map-get($colors, 'info');
        border-color: map-get($colors, 'info');
    }

    &.alert--warning {
        color: map-get($colors, 'warning');
        border-color: map-get($colors, 'warning');
    }

    &.alert--danger {
        color: map-get($colors, 'danger');
        border-color: map-get($colors, 'danger');
    }
}