@import "../variables"; @import "../helpers/mixins"; .#{$prefix}-chat-container { box-sizing: border-box; @include flex-column; height: 100%; min-width: $chat-container-min-width; // Required for ellipsis in child elements color: $chat-container-color; background-color: $chat-container-bg-color; & .#{$prefix}-message-input { border-top: $chat-container-message-input-border-top; border-right: $chat-container-message-input-border-right; border-bottom: $chat-container-message-input-border-bottom; border-left: $chat-container-message-input-border-left; //box-shadow: 0px -4px 5px -5px rgba(0, 0, 0, 0.38); margin-top:auto; // Message input and following elements (input toolbox) will be placed at the bottom of the chat-container padding: 0.3em 0 0.3em 0em; color: $chat-container-message-input-color; background-color: $chat-container-message-input-bg-color; & .#{$prefix}-message-input__content-editor-wrapper:first-child { margin-left:0.8em; } & .#{$prefix}-message-input__content-editor-wrapper:last-child { margin-right:0.8em; } } & .#{$prefix}-input-toolbox { margin: $chat-container-input-toolbox-margin; padding: $chat-container-input-toolbox-padding; color: $chat-container-input-toolbox-color; background-color: $chat-container-input-toolbox-bg-color; } }