.message {
    align-items: flex-start;
    border: solid 1px var(--background-quaternary);
    border-radius: 2px;
    color: var(--color-default);
    display: flex;
    flex-direction: row;
    flex-shrink: 0;
    justify-content: flex-start;
    margin-bottom: var(--spacing-default);
    overflow: hidden;
    padding: var(--spacing-default);
    text-align: left;
}

.content {
    padding-top: 2px;
    width: 100%;
}

.message .title {
    margin: 0 0 var(--spacing-half) 0;
}

@media (max-width: 768px) {
    .message {
      --size-default: 14px
    }
    .message .title {
        --size-subheader: 18px;
    }
}

.message.small {
    flex-shrink: 1;
    font-size: var(--size-default);
}

.message img {
    margin-right: 4px;
    max-width: 30px;
}

.message p:last-child {
    margin-bottom: 0 !important;
}

.success {
    composes: message;
    background-color: var(--color-success-background);
    border-color: var(--color-success-border);
}

.info {
    composes: message;
    background-color: var(--color-info-background);
    border-color: var(--color-info-border);
}

.warning {
    composes: message;
    background-color: var(--color-warning-background);
    border-color: var(--color-warning-border);
}

.error {
    composes: message;
    background-color: var(--color-error-background);
    border-color: var(--color-error-border);
}
