.message {
    border-radius: 0.25rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    font-weight: 550;

    &.message--error {
        background-color: #fee7e7;
        border-left: 4px solid var(--error-red);
        color: var(--error-red);
    }

    &.message--warning {
        background-color: #fff4e5;
        border-left: 4px solid var(--warning-orange);
        color: var(--warning-orange);
    }

    &.message--info {
        background-color: #e8f4fd;
        border-left: 4px solid var(--info-blue);
        color: var(--info-blue);
    }

    &.message--success {
        background-color: #e7f9e7;
        border-left: 4px solid var(--success-green);
        color: var(--success-green);
    }

    svg { height: 1.5rem; }
    i { font-size: 0.75rem; }
}