.feedback-note {
    width: 100%;
    display: flex;
    align-items: center;
    padding: 10px 15px;
    box-sizing: border-box;
}

    .feedback-note * {
        line-height: calc(var(--element-spacing) * 2);
    }

    .feedback-note strong {
        margin-right: var(--element-spacing);
    }

    .feedback-note.feedback-success {
        border: 1px solid var(--brand-feedback-green);
        background: rgba(31, 193, 107, 0.1);
    }

    .feedback-note.feedback-error {
        border: 1px solid var(--brand-feedback-red);
        background: rgba(199, 11, 25, 0.1);
    }

    .feedback-note.feedback-warning {
        border: 1px solid var(--brand-feedback-yellow);
        background: rgba(255, 219, 67, 0.1);
    }

    .feedback-note.feedback-info {
        border: 1px solid rgba(57,112,215, 0.3);
        background: rgba(57,112,215, 0.1);
    }