src/components/Message/Message.module.css

@import "../_variables.css";

.messageBox {
    padding: 8px 24px;
    border-radius: 16px;
    width: fit-content;
    box-shadow: var(--shadow-default);
    margin: var(--spacing-huge) var(--spacing-zero)
}

.userMessageBox {
    background-color: var(--color-primary);
    max-width: 60%;
    margin-left: auto;
    align-self: flex-end;
}

.userMessageBox p {
    color: var(--text-color-button);
}

.systemMessageBox {
    color: var(--text-color-button);
    background-color: var(--background-color-primary);
    max-width: 100%;
    align-self: flex-start;
    margin-right: auto;
}

.systemMessageBox p {
    color: var(--text-color-primary)
}