src/components/molecules/ChatMessageBox/ChatMessageBox.scss
@import "scss/constants";
.Chatbox {
&--question {
background-color: $dark-green;
}
&__form {
padding: $spacing--md;
display: flex;
align-items: center;
.InputField {
flex-grow: 1;
}
}
&__input {
font-size: 14px;
text-align: left;
padding-left: $spacing--lg;
}
&__buttons {
display: flex;
flex-grow: 0;
}
&__submit-button {
outline: none;
border: none;
min-width: $submit-button-diameter;
min-height: $submit-button-diameter;
border-radius: $border-radius--max;
display: flex;
justify-content: center;
align-items: center;
margin-left: $spacing--xs;
background-color: $accent--under;
&:disabled {
background-color: $secondary--dark;
}
}
&__submit-button-icon {
color: $accent--over;
}
&__emoji-picker {
position: absolute;
bottom: 65px;
right: 60px;
z-index: z(chatbox-emoji-picker);
// Override default lib styles
.emoji-mart-search {
margin: 9px 3px 3px 3px;
}
.emoji-mart-search-icon {
top: 0;
display: flex;
height: 100%;
justify-content: center;
align-items: center;
}
}
}