dappros/ethora

{"version":3,"file":"static/css/main.e5c34dc3.css","mappings":"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","sources":["pages/ChatInRoom/theme/default/components/_main-container.scss","pages/ChatInRoom/theme/default/_variables.scss","pages/ChatInRoom/theme/default/helpers/_mixins.scss","pages/ChatInRoom/theme/default/components/_message.scss","pages/ChatInRoom/theme/default/components/_message-group.scss","pages/ChatInRoom/theme/default/components/_message-separator.scss","pages/ChatInRoom/theme/default/components/_message-list.scss","pages/ChatInRoom/theme/default/components/_avatar.scss","pages/ChatInRoom/theme/default/components/_avatar-group.scss","pages/ChatInRoom/theme/default/components/_message-input.scss","pages/ChatInRoom/theme/default/components/_input-toolbox.scss","pages/ChatInRoom/theme/default/components/_chat-container.scss","pages/ChatInRoom/theme/default/components/_typing-indicator.scss","pages/ChatInRoom/theme/default/components/_conversation-header.scss","pages/ChatInRoom/theme/default/components/_conversation.scss","pages/ChatInRoom/theme/default/components/_conversation-list.scss","pages/ChatInRoom/theme/default/components/_status.scss","pages/ChatInRoom/theme/default/components/_sidebar.scss","pages/ChatInRoom/theme/default/components/_expansion-panel.scss","pages/ChatInRoom/theme/default/components/_search.scss","pages/ChatInRoom/theme/default/components/_buttons.scss","pages/ChatInRoom/theme/default/components/_loader.scss","pages/ChatInRoom/theme/default/components/_overlay.scss","pages/ChatInRoom/theme/default/components/_status-list.scss","pages/ChatInRoom/theme/default/components/_perfect-scrollbar.scss","pages/Signon/Tnc.scss"],"sourcesContent":["@import \"../variables\";\n@import \"../helpers/mixins\";\n\n.#{$prefix}-main-container {\n  position:relative;\n  @include flex-row;\n  height: 100%;\n  overflow: auto;\n  border: $main-container-border;\n  box-sizing: border-box;\n  color: $main-container-color;\n  background-color: $main-container-bg-color;\n  font-size: $main-container-font-size;\n  \n  & > .#{$prefix}-conversation-list {\n    order: 0;\n    height: 100%;\n    flex-basis: $main-container-conversation-list-flex-basis;\n    border-top: $main-container-conversation-list-border-top;\n    border-right: $main-container-conversation-list-border-right;\n    border-bottom: $main-container-conversation-list-border-bottom;\n    border-left: $main-container-conversation-list-border-left;\n    box-shadow: 2px 0 5px -2px rgba(0,0,0,0.38);\n    /* Hmm without this, box shadow is cut at bottom */\n    z-index:2;\n  }\n\n  & > .#{$prefix}-sidebar.#{$prefix}-sidebar--left {\n    order:0;\n    height:100%;\n    max-width:$main-container-sidebar-left-max-width;\n    flex-basis: 35%;\n    border-right: $main-container-conversation-list-border-right;\n    //box-shadow: 2px 0 5px -2px rgba(0,0,0,0.38);\n    /* Hmm without this, box shadow is cut at bottom */\n    z-index:2;\n  }\n\n  & > .#{$prefix}-sidebar.#{$prefix}-sidebar--right {\n    flex-basis: 25%;\n    min-width: $main-container-sidebar-right-min-width;\n    max-width: $main-container-sidebar-right-max-width;\n\n    border-top: $main-container-sidebar-right-border-top;\n    border-right: $main-container-sidebar-right-border-right;\n    border-bottom: $main-container-sidebar-right-border-bottom;\n    border-left: $main-container-sidebar-right-border-left;\n    \n  }\n  \n  & > .#{$prefix}-sidebar.#{$prefix}-sidebar--left .#{$prefix}-search {\n    margin:0.5em;\n  }\n  \n  & .#{$prefix}-chat-container {\n    order:1;\n    z-index:1;\n    flex-grow: 1;\n    flex-basis: 65%;\n    border-right: $main-container-chat-container-border-right;\n  }\n  \n  & .#{$prefix}-sidebar {\n    order:2;\n    height:100%;\n    //box-shadow: -2px 0px 5px -2px rgba(0,0,0,0.38);\n    z-index:3;\n  }\n\n  // Clear expansion panel border in sidebar\n  & .#{$prefix}-sidebar .#{$prefix}-expansion-panel {\n    border-left:0;\n    border-top:0;\n    border-right:0;\n  }\n\n  // 3 because of scrollbar divs\n  & .#{$prefix}-sidebar .#{$prefix}-expansion-panel:nth-last-child(3) {\n    border-bottom: 0;\n  }\n  \n  & .#{$prefix}-conversation-header {\n    z-index: 1;\n  }\n\n  \n  /////////////////////////////////////////////////////////////\n  /// Responsive\n  &--responsive {\n\n    .#{$prefix}-chat-container {\n      \n      .#{$prefix}-conversation-header {\n        .#{$prefix}-conversation-header__back {\n          display: none;\n        }\n  \n        .#{$prefix}-conversation-header__actions {\n          .#{$prefix}-button--info {\n            display: none;\n          }\n        }\n        \n      }\n    }\n    \n    @media( max-width: map-get($grid-breakpoints, md) ) {\n      \n      min-width: calc( 1.6em + 40px + #{$chat-container-min-width} );  // Horizontal padding from conversation-list plus avatar width plus ChatContainer min-width\n      \n      .#{$prefix}-search {\n        display:none;\n      }\n  \n      > .#{$prefix}-sidebar.#{$prefix}-sidebar--left {\n        flex-basis: calc(1.6em + 40px); // Horizontal padding from conversation-list plus avatar width\n        min-width: calc(1.6em + 40px);\n      }\n  \n      >.#{$prefix}-sidebar.#{$prefix}-sidebar--right {\n        display: none;\n      }\n      \n      > .#{$prefix}-conversation-list { // Only if conversation-list is direct child of main-container because main-container and conversation-list have different flex-direction\n        flex-basis: calc(1.6em + 40px); // Horizontal padding from conversation-list plus avatar width\n      }\n  \n      .#{$prefix}-conversation-list,\n      .#{$prefix}-sidebar .#{$prefix}-conversation-list {\n  \n        .#{$prefix}-conversation {\n          > .#{$prefix}-avatar {\n            margin-right:0; // Reset right margin\n          }\n  \n          &__content {\n            display:none;\n          }\n  \n          &__operations {\n            display:none;\n          }\n          \n          &__last-activity-time {\n            display: none;\n          }\n          &__unread-dot {\n            position:absolute;\n            top:0.3em;\n            right:0.3em;\n            margin-right:0;\n          }\n        }\n      }\n\n      .#{$prefix}-conversation-header {\n\n        .#{$prefix}-conversation-header__actions {\n          .#{$prefix}-button--info {\n            display: flex;\n          }\n        }\n        \n      }\n      \n    }\n  \n    @media( max-width: map-get($grid-breakpoints, sm) ) {\n\n      min-width: auto;\n      \n      > .#{$prefix}-sidebar.#{$prefix}-sidebar--left {\n        display:none;\n      }\n\n\n      .#{$prefix}-chat-container {\n        // Show back arrow\n        .#{$prefix}-conversation-header {\n          .#{$prefix}-conversation-header__back {\n            display: flex;\n          }\n  \n          .#{$prefix}-conversation-header__info {\n            \n          }\n          \n        }\n      }\n      \n      \n      \n    }\n  }\n  \n/////////////////////////////////////////////////////////////\n  \n}\n","// Variables\n//\n//\n\n@import \"helpers/functions\";\n\n// Main class prefix\n$prefix: \"cs\" !default;\n\n// Grid breakpoints\n//\n// Breakpoints for responsive view\n\n$grid-breakpoints: (\n  xs: 0,\n  sm: 576px,\n  md: 768px,\n  lg: 992px,\n  xl: 1200px,\n  xxl: 1400px\n) !default;\n\n// Default font family\n//\n\n$default-font-family: Helvetica Neue, Segoe UI, Helvetica, Arial, sans-serif;\n\n// Colors\n//\n\n$color-primary: #c6e3fa !default;\n$color-primary-light: #f6fbff !default;\n$color-primary-dark: #6ea9d7 !default;\n$color-primary-dark: #6EAAD8 !default;\n\n$color-secondary: #91ECEC !default;\n$color-secondary-light: #C2F9F9 !default;\n$color-secondary-dark: #64D3D3 !default;\n\n// Material text colors\n// http://marcodiiga.github.io/rgba-to-rgb-conversion\n// Hex values are calculated based on white background \n// If you change background color rgb color will change, that is why its better to use rgba with opacity!\n$color-text: rgba(0, 0, 0, .87) !default; // #212121\n$color-text-medium: rgba(0, 0, 0, .60) !default; // #666666\n$color-text-disabled: rgba(0, 0, 0, .38) !default; // #9e9e9e\n$color-text-inverted: invert($color-text); \n\n// Base colors\n//\n// It's not recommended to change this colors because white is white and black is... black :)\n$color-white: #fff !default;\n$color-black: #000 !default;\n\n$default-bg-color: $color-white !default;\n\n// Element colors\n//\n\n$default-border-color: rgba-to-rgb(rgba(scale-color($color-primary-dark, $saturation: -55%), 0.4), $default-bg-color) !default;\n\n// State colors\n//\n\n$color-hover: $color-text !default;\n$color-bg-hover: rgba-to-rgb(rgba($color-primary-dark, 0.08), $default-bg-color) !default;\n$color-focus: $color-text !default;\n$color-bg-focus: rgba-to-rgb(rgba($color-primary-dark, 0.24), $color-primary-light) !default;\n$color-selected: darken($color-primary-dark, 25%) !default;\n$color-bg-selected: $color-bg-focus !default;\n$color-activated: darken($color-primary-dark, 25%)  !default;\n$color-bg-activated: $color-bg-focus !default;\n$color-active: $color-primary-dark !default;\n$color-bg-active: $color-bg-activated !default;\n$color-disabled: $color-text-disabled !default;\n$color-bg-disabled: rgba(0, 0, 0, .38) !default;\n\n// Functional colors\n//\n\n$color-danger: #ec1212 !default;\n$color-error: $color-danger !default;\n\n// Border radius\n//\n// Default border radius for elements\n\n$default-border-radius: 0.7em !default;\n\n// Opacity\n//\n\n$disabled-opacity: 0.38 !default;\n\n///////////////////////////////////////// Components /////////////////////////////////////////\n\n// Avatar\n// \n\n// Sizes\n$avatar-xs-width: 16px !default;\n$avatar-sm-width: 26px !default;\n$avatar-md-width: 42px !default;\n$avatar-lg-width: 68px !default;\n$avatar-fluid-width: 100% !default;\n\n// Avatar group\n// \n\n// Sizes\n$avatar-group-xs-width: 16px !default;\n$avatar-group-sm-width: 32px !default;\n$avatar-group-md-width: 100% !default;\n$avatar-group-lg-width: 80px !default;\n$avatar-group-fluid-width: 100% !default;\n\n$avatar-group-md-min-width: 40px !default; \n\n// Buttons\n// \n// General button element and dedicated (function specific) buttons\n\n// Borders\n$button-border: solid 1px $default-border-color !default;\n$button-border-radius: $default-border-radius !default;\n\n// Colors\n$button-color: $color-primary-dark !default;\n$button-bg-color: transparent !default;\n\n// Fonts\n$button-font-size: 1em !default;\n$button-line-height: 1.5 !default;\n\n// Opacity\n$button-hover-opacity: 0.6 !default;\n$button-disabled-opacity: $disabled-opacity !default;\n\n// Spacing\n$button-margin: 0.1em 0.2em !default;\n$button-padding: 0.2em 0.7em !default;\n\n// Add user button \n\n$button-adduser-color: $button-color !default;\n$button-adduser-bg-color: $button-bg-color !default;\n\n// Arrow button\n\n$button-arrow-color: $button-color !default;\n$button-arrow-bg-color: $button-bg-color !default;\n\n// Ellipsis button\n\n$button-ellipis-color: $button-color !default;\n$button-ellipis-bg-color: $button-bg-color !default;\n\n// Info button\n\n$button-info-color: $button-color !default;\n$button-info-bg-color: $button-bg-color !default;\n\n// Star button\n\n$button-star-color: $button-color !default;\n$button-star-bg-color: $button-bg-color !default;\n\n// Video call button\n\n$button-videocall-color: $button-color !default;\n$button-videocall-bg-color: $button-bg-color !default; \n\n// Voice call button\n\n$button-voicecall-color: $button-color !default;\n$button-voicecall-bg-color: $button-bg-color !default;\n\n// Send button\n\n$button-send-color: $button-color !default;\n$button-send-bg-color: $button-bg-color !default;\n\n// Attachment button\n\n$button-attachment-color: $button-color !default;\n$button-attachment-bg-color: $button-bg-color !default;\n\n// Chat container\n//\n\n// Borders\n$chat-container-message-input-border-top: solid 1px $default-border-color !default;\n$chat-container-message-input-border-right: solid 0px $default-border-color !default;\n$chat-container-message-input-border-bottom: solid 0px $default-border-color !default;\n$chat-container-message-input-border-left: solid 0px $default-border-color !default;\n\n// Colors \n$chat-container-color: $color-text !default;\n$chat-container-bg-color: $default-bg-color !default;\n$chat-container-message-input-color: $color-text !default;\n$chat-container-message-input-bg-color: $default-bg-color !default;\n$chat-container-input-toolbox-color: $color-text !default;\n$chat-container-input-toolbox-bg-color: $default-bg-color !default;\n\n// Sizes\n$chat-container-min-width: 180px !default;\n\n// Conversation\n//\n\n// Borders\n$conversation-border-top: 0 !default;\n$conversation-border-right: 0 !default;\n$conversation-border-bottom: 0 !default;\n$conversation-border-left: 0 !default;\n$conversation-active-border-top: 0 !default;\n$conversation-active-border-right: 0 !default;\n$conversation-active-border-bottom: 0 !default;\n$conversation-active-border-left: 0 !default;\n$conversation-activated-border-top: 0 !default;\n$conversation-activated-border-right: 0 !default;\n$conversation-activated-border-bottom: 0 !default;\n$conversation-activated-border-left: 0 !default;\n\n// Colors\n$conversation-color: $color-text !default;\n$conversation-bg-color: $default-bg-color !default;\n$conversation-unread-color: $color-white !default;\n$conversation-unread-bg-color: $color-danger !default;\n$conversation-hover-bg-color: $color-bg-hover !default;\n$conversation-unread-dot-color: #2e63e8 !default;\n$conversation-name-color: $color-text !default;\n$conversation-name-activated-color: $color-activated !default;\n$conversation-info-color: $color-text-medium !default;\n$conversation-info-activated-color: $color-activated !default;\n$conversation-active-color: $conversation-color !default;\n$conversation-active-bg-color: $color-bg-active !default;\n$conversation-activated-color: $color-activated !default;\n$conversation-activated-bg-color: $color-bg-activated !default;\n\n// Fonts\n$conversation-font-family: $default-font-family !default;\n$conversation-unread-font-size: 0.75em !default;\n$conversation-last-sender-name-font-weight: normal !default;\n$conversation-info-content-font-weight: normal !default;\n$conversation-info-activated-font-weight: normal !default;\n$conversation-activated-font-weight: normal !default;\n$conversation-name-activated-font-weight: normal !default;\n\n// Sizes\n$conversation-unread-dot-width: 0.7em !default;\n\n// Spacing\n$conversation-operations-margin: 0 0 0 auto !default;\n$conversation-last-activity-time-margin: 0 0 0 auto !default;\n$chat-container-input-toolbox-margin: 0 !default;\n$chat-container-input-toolbox-padding: 0 0.8em 0.17em 0 !default;\n\n// Conversation header\n//\n\n// Borders\n$conversation-header-border-top: solid 0px $default-border-color !default;\n$conversation-header-border-right: solid 0px $default-border-color !default;\n$conversation-header-border-bottom: solid 1px $default-border-color !default;\n$conversation-header-border-left: solid 0px $default-border-color !default;\n\n// Colors\n$conversation-header-bg-color: $color-primary-light !default;\n$conversation-header-color: color-by-background($conversation-header-bg-color, $color-text, $color-text-inverted) !default;\n$conversation-header-user-name-color: $conversation-header-color !default;\n$conversation-header-user-name-bg-color: $conversation-header-bg-color !default;\n$conversation-header-info-color: color-by-background($conversation-header-bg-color, $color-text-medium, $color-text-inverted) !default;\n$conversation-header-info-bg-color: $conversation-header-bg-color !default;\n$conversation-header-action-button-color: normal !default;\n$conversation-header-action-button-bg-color: transparent !default;\n$conversation-header-actions-color: $color-text !default;\n$conversation-header-actions-bg-color: transparent !default;\n\n// Fonts\n$conversation-header-font-family: $default-font-family !default;\n$conversation-header-font-size: 1em !default;\n\n// Sizes\n$conversation-header-content-min-width: 0 !default;\n\n// Spacing\n$conversation-header-actions-margin: 0 0 0 0.5em !default;\n\n// Conversation list\n//\n\n// Colors\n$conversation-list-color: $color-text !default;\n$conversation-list-bg-color: transparent !default;\n$conversation-list-loading-more-bg-color: transparent !default;\n\n// Sizes\n$conversation-list-loading-more-height: 1.2em !default;\n\n// Spacing\n$conversation-list-loading-more-padding: 2px 0 !default;\n\n// Expansion panel\n//\n\n// Borders\n$expansion-panel-border: solid 1px $default-border-color !default;\n\n// Colors\n$expansion-panel-color: $color-text !default;\n$expansion-panel-bg-color: $default-bg-color !default;\n$expansion-panel-header-color: $color-text-medium !default;\n$expansion-panel-header-bg-color: $color-primary-light !default;\n$expansion-panel-header-hover-color: $expansion-panel-header-color !default;\n$expansion-panel-header-hover-bg-color: $color-bg-hover !default;\n$expansion-panel-header-open-color: $expansion-panel-header-color !default;\n$expansion-panel-header-open-bg-color: $expansion-panel-header-bg-color !default;\n$expansion-panel-content-color: $color-text !default;\n$expansion-panel-content-bg-color: $default-bg-color !default;\n$expansion-panel-content-open-color: $expansion-panel-content-color !default;\n$expansion-panel-content-open-bg-color: $expansion-panel-content-bg-color !default;\n\n// Fonts \n$expansion-panel-font-family: $default-font-family !default;\n$expansion-panel-font-weight: normal !default;\n$expansion-panel-font-size: inherit !default;\n$expansion-panel-font-variant: normal !default;\n\n$expansion-panel-header-font-family: $default-font-family !default;\n$expansion-panel-header-font-weight: bold !default;\n$expansion-panel-header-font-size: 0.75em !default;\n$expansion-panel-header-font-variant: normal !default;\n\n$expansion-panel-content-font-family: $default-font-family !default;\n$expansion-panel-content-font-weight: normal !default;\n$expansion-panel-content-font-size: 0.8em !default;\n$expansion-panel-content-font-variant: normal !default;\n\n\n// Input toolbox\n//\n\n// Colors\n$input-toolbox-send-btn-color: $color-secondary !default;\n$input-toolbox-upload-btn-color: $color-secondary !default;\n\n// Fonts\n$input-toolbox-btn-font-size: 1.2em !default;\n\n// Spacing\n$input-toolbox-btn-margin: 0 0.5em 0 0 !default;\n$input-toolbox-margin: 0 !default;\n$input-toolbox-padding: 0 0 0.4em 0 !default;\n\n// Loader\n//\n\n// Borders\n$loader-border-width: 0.2em !default;\n\n// Colors\n$loader-color: $color-text !default;\n$loader-bg-color: transparent !default;\n$loader-spinner-color: $color-primary-dark !default;\n$loader-spinner-bg-color: $color-primary !default;\n\n// Sizes\n$loader-width: 1.8em !default;\n$loader-height: 1.8em !default;\n\n// Main container\n//\n\n// Borders\n$main-container-border: solid 1px $default-border-color !default;\n$main-container-conversation-list-border-top: solid 0px $default-border-color !default;\n$main-container-conversation-list-border-right: solid 1px $default-border-color !default;\n$main-container-conversation-list-border-bottom: solid 0px $default-border-color !default;\n$main-container-conversation-list-border-left: solid 0px $default-border-color !default;\n$main-container-chat-container-border-right: solid 0px $default-border-color !default;\n$main-container-sidebar-right-border-top: solid 0px $default-border-color !default;\n$main-container-sidebar-right-border-right: solid 0px $default-border-color !default;\n$main-container-sidebar-right-border-bottom: solid 0px $default-border-color !default;\n$main-container-sidebar-right-border-left: solid 1px $default-border-color !default;\n\n// Colors\n$main-container-color: $color-text !default;\n$main-container-bg-color: $default-bg-color !default;\n\n// Fonts\n$main-container-font-size: 1rem !default; // Font size for child elements are relative to this size\n\n// Sizes\n$main-container-conversation-list-flex-basis: 300px !default;\n$main-container-sidebar-width: 300px !default;\n$main-container-sidebar-min-width: $main-container-sidebar-width !default;\n\n$main-container-sidebar-left-max-width: 320px !default;\n$main-container-sidebar-right-min-width: 150px !default;\n$main-container-sidebar-right-max-width: 320px !default;\n\n// Message\n// \n\n// Boolean flags\n$show-message-incoming-sender-name: false !default;\n$show-message-incoming-single-sender-name: true !default;\n$show-message-incoming-first-sender-name: true !default;\n$show-message-incoming-last-sender-name: false !default;\n\n$show-message-outgoing-sender-name: false !default;\n$show-message-outgoing-single-sender-name: false !default;\n$show-message-outgoing-first-sender-name: false !default;\n$show-message-outgoing-last-sender-name: false !default;\n\n$show-message-incoming-sent-time: false !default;\n$show-message-incoming-single-sent-time: true !default;\n$show-message-incoming-first-sent-time: true !default;\n$show-message-incoming-last-sent-time: false !default;\n\n$show-message-outgoing-sent-time: false !default;\n$show-message-outgoing-single-sent-time: true !default;\n$show-message-outgoing-first-sent-time: true !default;\n$show-message-outgoing-last-sent-time: false !default;\n\n// Avatar flags\n$show-message-incoming-avatar: false !default;\n$show-message-incoming-single-avatar: true !default;\n$show-message-incoming-first-avatar: false !default;\n$show-message-incoming-last-avatar: true !default;\n\n$show-message-outgoing-avatar: false !default;\n$show-message-outgoing-single-avatar: true !default;\n$show-message-outgoing-first-avatar: false !default;\n$show-message-outgoing-last-avatar: true !default;\n\n// Borders\n$message-base-radius: $default-border-radius !default;\n\n$message-border-radius: 0 !default;\n\n// Border radius for single incoming message\n$message-incoming-single-border-radius: $message-border-radius !default;\n\n// Border radius for first incoming message\n$message-incoming-first-border-radius: $message-border-radius $message-border-radius $message-border-radius 0 !default;\n\n// Border radius for last incoming message\n$message-incoming-last-border-radius: 0 $message-border-radius $message-border-radius $message-border-radius !default;\n\n// Border radius for single outgoing message\n$message-outgoing-single-border-radius: $message-border-radius !default;\n\n// Border radius for first outgoing message\n$message-outgoing-first-border-radius: $message-border-radius $message-border-radius 0 $message-border-radius !default;\n\n// Border radius for last outgoing message\n$message-outgoing-last-border-radius: $message-border-radius $message-border-radius $message-border-radius $message-border-radius !default;\n\n// Border radius for content\n$message-content-border-radius: $message-base-radius $message-base-radius $message-base-radius $message-base-radius !default;\n\n// Border radius for normal incoming message content\n$message-incoming-content-border-radius: 0 $message-base-radius $message-base-radius 0 !default;\n\n// Border radius for single incoming message content\n$message-incoming-content-single-border-radius: 0 $message-base-radius $message-base-radius $message-base-radius !default;\n\n// Border radius for first incoming message content\n$message-incoming-content-first-border-radius: 0 $message-base-radius $message-base-radius 0 !default;\n\n// Border radius for last incoming message content\n$message-incoming-content-last-border-radius: 0 $message-base-radius 0 $message-base-radius !default;\n\n// Border radius for normal outgoing message content\n$message-outgoing-content-border-radius: $message-base-radius 0 0 $message-base-radius !default;\n\n// Border radius for single outgoing message content\n$message-outgoing-content-single-border-radius: $message-base-radius $message-base-radius 0 $message-base-radius !default;\n\n// Border radius for first outgoing message content\n$message-outgoing-content-first-border-radius: $message-base-radius 0 0 $message-base-radius !default;\n\n// Border radius for last outgoing message content\n$message-outgoing-content-last-border-radius: $message-base-radius 0 $message-base-radius $message-base-radius !default;\n\n// Colors\n$message-color: $color-text !default;\n$message-bg-color: transparent !default;\n\n$message-header-color: lighten($color-text, 30) !default;\n$message-header-bg-color: transparent !default;\n\n$message-footer-color: lighten($color-text, 30) !default;\n$message-footer-bg-color: transparent !default;\n\n$message-incoming-color: $message-color !default;\n$message-incoming-bg-color: $message-bg-color !default;\n\n$message-outgoing-color: $message-color !default;\n$message-outgoing-bg-color: transparent !default;\n\n$message-sender-name-color: $message-header-color !default;\n$message-sender-name-bg-color: transparent !default;\n\n$message-sent-time-color: $message-header-color !default;\n$message-sent-time-bg-color: transparent !default;\n\n$message-content-color: $color-text !default;\n$message-content-bg-color: $color-primary !default;\n\n$message-content-incoming-color: $color-text !default;\n$message-content-incoming-bg-color: $message-content-bg-color !default;\n\n$message-content-outgoing-color: $color-text !default;\n$message-content-outgoing-bg-color: $color-primary-dark !default;\n\n// Fonts\n$message-font-size: 1em !default;\n$message-font-family: $default-font-family !default;\n\n$message-content-font-family: $default-font-family !default;\n$message-content-font-weight: normal !default;\n$message-content-font-size: 0.91em !default;\n$message-content-font-variant: normal !default;\n\n// Sizes\n$message-avatar-width: 42px !default;\n\n// Spacing\n$message-margin:0; // Default margin for message\n$message-only-child-margin: 0.2em 0 0 0 !default;\n$message-not-only-child-margin: 0.2em 0 0 0 !default;\n\n$message-header-margin: 0 0.2em 0.1em 0.2em !default;\n$message-footer-margin: 0.1em 0.2em 0 0.2em !default;\n\n$message-content-margin-top: 0 !default;\n$message-monologue-margin-top: 0.4em !default;\n\n$message-avatar-horizontal-margin: 8px !default; // Pixels because need to calculate with avatar width\n$message-avatar-margin: 0 $message-avatar-horizontal-margin 0 0 !default;\n$message-incoming-avatar-margin: 0 $message-avatar-horizontal-margin 0 0 !default;\n$message-outgoing-avatar-margin: 0 0 0 $message-avatar-horizontal-margin !default;\n\n// Message group\n//\n\n// Borders\n$message-group-message-base-radius: $default-border-radius !default;\n// Border radius for normal incoming message content\n$message-group-incoming-message-content-border-radius: 0 $message-group-message-base-radius $message-group-message-base-radius 0 !default;\n// Border radius for single incoming message content\n$message-group-incoming-message-content-single-border-radius: 0 $message-group-message-base-radius $message-group-message-base-radius $message-group-message-base-radius !default;\n// Border radius for first message content in incoming group\n$message-group-incoming-message-content-first-border-radius: 0 $message-group-message-base-radius $message-group-message-base-radius 0 !default;\n// Border radius for last message content in incoming group\n$message-group-incoming-message-content-last-border-radius: 0 $message-group-message-base-radius 0 $message-group-message-base-radius !default;\n// Border radius for normal outgoing message content\n$message-group-outgoing-message-content-border-radius: $message-group-message-base-radius 0 0 $message-group-message-base-radius !default;\n// Border radius for single outgoing message content\n$message-group-outgoing-message-content-single-border-radius: $message-group-message-base-radius $message-group-message-base-radius 0 $message-group-message-base-radius !default;\n// Border radius for first message content in outgoing group\n$message-group-outgoing-message-content-first-border-radius: $message-group-message-base-radius 0 0 $message-group-message-base-radius !default;\n// Border radius for last message content in outgoing group\n$message-group-outgoing-message-content-last-border-radius: $message-group-message-base-radius 0 $message-group-message-base-radius $message-group-message-base-radius !default;\n\n//  Colors\n$message-group-header-color: $color-text-medium !default;\n$message-group-header-bg-color: transparent !default;\n$message-group-footer-color: $color-text-medium !default;\n$message-group-footer-bg-color: transparent !default;\n$message-group-message-content-bg-color: $color-primary !default;\n\n$message-group-message-content-incoming-color: $color-text !default;\n$message-group-message-content-incoming-bg-color: $message-group-message-content-bg-color !default;\n\n$message-group-message-content-outgoing-color: $color-text !default;\n$message-group-message-content-outgoing-bg-color: $color-primary-dark !default;\n\n// Fonts\n$message-group-header-font-size: 0.8em !default;\n$message-group-header-font-family: $default-font-family !default;\n\n$message-group-footer-font-size: 0.8em !default;\n$message-group-footer-font-family: $default-font-family !default;\n\n// Spacing\n$message-group-margin: 0.4em 0 0 0 !default;\n$message-group-header-margin: 0 0 0.2em 0 !default;\n$message-group-footer-margin: 0.2em 0 0 0 !default;\n\n$message-group-avatar-horizontal-margin: 8px;\n\n$message-group-header-padding: 0 !default;\n$message-group-footer-padding: 0 !default;\n\n// Message input\n//\n\n// Borders\n$message-input-border-top: none !default;\n$message-input-border-right: none !default;\n$message-input-border-bottom: none !default;\n$message-input-border-left: none !default;\n\n$message-input-content-editor-wrapper-border-radius: $default-border-radius !default;\n\n$message-input-content-editor-border-top-width: 0 !default;    // These variables\n$message-input-content-editor-border-right-width: 0 !default;  // are used\n$message-input-content-editor-border-bottom-width: 0 !default; // for some calculations\n$message-input-content-editor-border-left-width: 0 !default;   // by _message-input.scss\n\n$message-input-content-editor-border-top: $message-input-content-editor-border-top-width none !default;\n$message-input-content-editor-border-right: $message-input-content-editor-border-right-width none !default;\n$message-input-content-editor-border-bottom: $message-input-content-editor-border-bottom-width none !default;\n$message-input-content-editor-border-left: $message-input-content-editor-border-left-width none !default;\n\n// Colors\n$message-input-bg-color: $default-bg-color !default;\n$message-input-content-editor-color: $color-text !default;\n$message-input-content-editor-wrapper-bg-color: $color-primary !default;\n$message-input-content-editor-container-bg-color: $message-input-content-editor-wrapper-bg-color !default;\n$message-input-content-editor-bg-color: $message-input-content-editor-wrapper-bg-color !default;\n$message-input-content-editor-disabled-color: $color-text-medium !default;\n$message-input-content-editor-disabled-bg-color: rgba($message-input-content-editor-bg-color, 0.38) !default;\n\n// Fonts\n$message-input-content-editor-font-family: $default-font-family !default;\n$message-input-content-editor-container-font-size: 0.94em !default;\n\n// Sizes\n$message-input-max-lines: 4;\n\n// Spacing\n$message-input-placeholder-color: $color-text-disabled !default;\n$message-input-padding: 0 !default;\n\n$message-input-content-editor-wrapper-margin: 0 !default;\n$message-input-content-editor-wrapper-padding: 0.6em 0.9em !default;\n$message-input-content-editor-container-padding-top: 0em !default;     // These variables\n$message-input-content-editor-container-padding-right: 0em !default;   // are used \n$message-input-content-editor-container-padding-bottom: 0em !default;  // for some calculations\n$message-input-content-editor-container-padding-left: 0em !default;    // by _message-input.scss\n$message-input-content-editor-container-padding: $message-input-content-editor-container-padding-top $message-input-content-editor-container-padding-right $message-input-content-editor-container-padding-bottom $message-input-content-editor-container-padding-left !default;\n\n// !!! Be careful, when set this to unitless value - calculations below will not work properly\n// Also check if scroll is working properly after changing this value\n$message-input-content-editor-container-line-height: 1.35em !default;\n\n// Message list\n//\n\n// Colors\n$message-list-color: $color-text !default;\n$message-list-bg-color: $default-bg-color !default;\n$message-list-typing-indicator-bg-color: $color-white !default;\n$message-list-loading-more-bg-color: $color-white !default;\n\n// Sizes\n$message-list-loading-more-height: 1.2em !default;\n\n// Spacing\n$message-list-scroll-wrapper-padding: 0 1.2em 0 0.8em !default;\n$message-list-loading-more-padding: 2px 0 !default;\n$message-list-message-separator-margin-top: 1.2em !default;\n\n// Message separator\n//\n\n// Colors\n$message-separator-color: $color-primary-dark !default;\n$message-separator-bg-color: $default-bg-color !default;\n$message-separator-font-size: 0.8em !default;\n$message-separator-font-family: $default-font-family !default;\n\n$message-separator-content-color: $message-separator-color !default;\n$message-separator-content-bg-color: $message-separator-bg-color !default;\n\n$message-separator-line-color: $message-separator-color !default;\n\n// Spacing\n$message-separator-left-line-margin: 0 1em 0 0 !default;\n$message-separator-right-line-margin: 0 0 0 1em !default;\n\n// Overlay\n//\n\n// Colors\n$overlay-bg-color: rgba(198,227,250,0.38) !default;\n\n// Search\n//\n\n// Borders\n$search-border-radius: $default-border-radius !default;\n\n//  Colors\n$search-bg-color: $color-primary !default;\n$search-color: $color-text !default;\n$search-icon-color: $color-primary-dark !default;\n$search-clear-icon-color: $search-icon-color !default;\n$search-clear-icon-color-hover: rgba($color-primary-dark, 0.6) !default;\n$search-placeholder-color: $color-text !default;\n$search-input-bg-color: $search-bg-color !default;\n$search-disabled-color: $color-disabled !default;\n$search-disabled-bg-color: $search-bg-color !default;\n$search-input-disabled-bg-color: $search-disabled-bg-color !default;\n\n// Fonts\n$search-font-family: inherit !default;\n$search-font-size: inherit !default;\n$search-input-font-family: inherit !default;\n$search-input-font-size: 0.8em !default;\n\n// Opacity\n$search-disabled-opacity: $disabled-opacity !default;\n\n// Sidebar\n//\n\n// Colors\n$sidebar-right-bg-color: $default-bg-color !default;\n$sidebar-left-bg-color: $default-bg-color !default;\n\n// Status\n// \n\n// Colors\n$status-available-color: #00a27e !default;\n$status-unavailable-color: #a66d00 !default;\n$status-away-color: #fc8b00 !default;\n$status-dnd-color: $color-danger !default;\n$status-invisible-color: #c2d1d9 !default;\n$status-eager-color: #ffee00 !default;\n\n$status-selected-color: $color-selected !default;\n$status-selected-bg-color: $color-bg-selected !default;\n\n$status-available-name-color: $color-text !default;\n$status-unavailable-name-color: $color-text !default;\n$status-away-name-color: $color-text !default;\n$status-dnd-name-color: $color-text !default;\n$status-invisible-name-color: $color-text !default;\n$status-eager-name-color: $color-text !default;\n\n// Fonts\n$status-xs-fontsize: 1em !default;\n$status-sm-fontsize: 1em !default;\n$status-md-fontsize: 1em !default;\n$status-lg-fontsize: 1em !default;\n\n// Sizes\n$status-xs-width: 4px !default;\n$status-sm-width: 8px !default;\n$status-md-width: 11px !default;\n$status-lg-width: 14px !default;\n$status-fluid-width: 100% !default;\n\n// Spacing\n$status-name-margin: 0 0 0 0.58em !default;\n\n// Status list\n// \n\n// Colors\n$status-list-color: $color-text !default;\n$status-list-bg-color: $default-bg-color !default;\n\n$status-list-margin: 0 !default;\n$status-list-padding: 1em !default;\n\n$status-list-item-margin: 0 !default;\n$status-list-item-padding: 0.4em 0.8em!default;\n\n$status-list-item-hover-color: $color-text-medium !default;\n$status-list-item-hover-bg-color: $color-bg-hover !default;\n\n$status-list-item-focus-color: $color-focus !default;\n$status-list-item-focus-bg-color: $color-bg-focus !default;\n\n$status-list-item-selected-color: $color-selected !default;\n$status-list-item-selected-bg-color: $color-bg-selected !default;\n\n$status-list-item-active-color: $color-text !default;\n$status-list-item-active-bg-color: $color-bg-active !default;\n\n// Typing indicator\n//\n\n// Colors\n$typing-indicator-text-color: $color-primary-dark !default;\n$typing-indicator-text-bg-color: transparent !default;\n\n$typing-indicator-indicator-bg-color: transparent !default;\n$typing-indicator-dot-bg-color: $color-primary-dark !default;\n\n// Fonts\n$typing-indicator-font-family: $default-font-family !default;\n$typing-indicator-font-size: inherit !default;\n\n// Sizes\n$typing-indicator-dot-size: 4px !default;\n\n// Spacing\n$typing-indicator-dot-spacing: 3px !default;\n$typing-indicator-text-margin: 0 0 0 0.5em !default;\n","@mixin reset-spacing {\n  margin: 0;\n  padding: 0;\n}\n\n@mixin reset-button {\n  @include reset-spacing;\n  background: none;\n  border: none;\n}\n\n@mixin reset-list {\n  @include reset-spacing;\n  list-style-type: none;\n}\n\n@mixin flex-row {\n  display: flex;\n  flex-direction: row;\n}\n\n@mixin flex-row-reverse {\n  display: flex;\n  flex-direction: row-reverse;\n}\n\n@mixin flex-column {\n  display: flex;\n  flex-direction: column;\n}\n\n@mixin text-truncate {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n// Mixins for status size\n// \n\n$bullet-class: #{$prefix}-status__bullet;\n\n@mixin status-xs {\n  font-size: $status-xs-fontsize;\n  width: $status-xs-width;\n  height: $status-xs-width;\n  .#{$bullet-class} {\n    width: $status-xs-width;\n    height: $status-xs-width;\n  }\n}\n\n@mixin status-sm {\n  font-size: $status-sm-fontsize;\n  .#{$bullet-class} {\n    width: $status-sm-width;\n    height: $status-sm-width;\n  }\n}\n\n@mixin status-md {\n  font-size: $status-md-fontsize;\n  width: $status-md-width;\n  height: $status-md-width;\n  .#{$bullet-class} {\n    width: $status-md-width;\n    height: $status-md-width;\n  }\n}\n\n@mixin status-lg {\n  font-size: $status-lg-fontsize;\n  width: $status-lg-width;\n  height: $status-lg-width;\n  .#{$bullet-class} {\n    width: $status-lg-width;\n    height: $status-lg-width;\n  }\n}\n\n// Tablica z rozmiarami klucz wartość\n$status-sizes: (\n        \"xs\": $status-xs-width,\n        \"sm\": $status-sm-width,\n        \"md\": $status-md-width,\n        \"lg\": $status-lg-width\n);\n\n$status-font-sizes: (\n        \"xs\": $status-xs-fontsize,\n        \"sm\": $status-sm-fontsize,\n        \"md\": $status-md-fontsize,\n        \"lg\": $status-lg-fontsize\n);\n\n@mixin status-size($size, $border-width:0, $named:false) {\n  $element-width: map_get($status-sizes, $size) + 2*$border-width;\n  $bullet-width: $element-width - 2*$border-width;\n  font-size: map_get($status-font-sizes, $size);\n  \n  @if ( $named == false ) {\n    width: $element-width;\n    height: $element-width;\n  } @else {\n    width: auto;\n    height: auto;\n  } \n  \n  .#{$bullet-class} {\n    width: $bullet-width;\n    min-width: $bullet-width;\n    height: $bullet-width;\n  }\n  \n}","@import \"../variables\";\n\n$_message-avatar-justify-content: flex-end;\n\n// How far message avatar should be postponed from message (and message from avatar for outgoing)\n$_message-avatar-offset: $message-avatar-width + $message-avatar-horizontal-margin;\n\n\n.#{$prefix}-message {\n  // Local alias\n  $message-class: &;\n\n  box-sizing: border-box;\n  font-size: $message-font-size;\n  font-family: $message-font-family;\n  color: $message-color;\n  display: flex;\n  flex-direction: row;\n  padding: 0;\n  background-color: $message-bg-color;\n  overflow: hidden;\n\n  border-radius: $message-border-radius;\n  \n  &:only-child {\n    margin: $message-only-child-margin;\n  }\n  \n  &:not(:only-child) {\n    margin: $message-not-only-child-margin;\n  }\n\n  &__avatar {\n    box-sizing: border-box;\n    margin: $message-avatar-margin;\n    display: flex;\n    flex-direction: column;\n    justify-content: $_message-avatar-justify-content;\n    width: $message-avatar-width;\n  }\n  \n  &__content-wrapper {\n    box-sizing: border-box;\n    display: flex;\n    flex-direction: column;\n  }\n\n  &__header {\n    box-sizing: border-box;\n    color: $message-header-color;\n    background-color: $message-header-bg-color;\n    display: flex;\n    flex-direction: row;\n    flex-wrap: nowrap;\n    justify-content: space-between;\n    font-size: 0.8em;\n    margin: $message-header-margin;\n\n    #{$message-class}__sender-name {\n      box-sizing: border-box;\n      color: $message-sender-name-color;\n      background-color: $message-sender-name-bg-color;\n    }\n\n    #{$message-class}__sent-time {\n      box-sizing: border-box;\n      color: $message-sent-time-color;\n      background-color: $message-sent-time-bg-color;\n      margin-left: auto;\n      padding-left: 0.8em;\n    }\n    \n  }\n\n  &__footer {\n    box-sizing: border-box;\n    color: $message-footer-color;\n    background-color: $message-footer-bg-color;\n    display: flex;\n    font-size: 0.8em;\n    margin: $message-footer-margin;\n\n    #{$message-class}__sender-name {\n      box-sizing: border-box;\n      color: $message-sender-name-color;\n      background-color: $message-sender-name-bg-color;\n    }\n\n    #{$message-class}__sent-time {\n      box-sizing: border-box;\n      color: $message-sent-time-color;\n      background-color: $message-sent-time-bg-color;\n      margin-left: auto;\n      padding-left: 0.8em;\n    }\n    \n  }\n  \n  &__content {\n    box-sizing: border-box;\n    color: $message-content-color;\n    background-color: $message-content-bg-color;\n    margin-top: $message-content-margin-top;\n    padding: 0.6em 0.9em;\n    border-radius: $message-content-border-radius;\n    white-space: pre-wrap;\n    overflow-wrap: anywhere;\n    word-break: break-word; // break-word value is deprecated, but it's necessary for Safari\n    font-family: $message-content-font-family;\n    font-weight: $message-content-font-weight;\n    font-size: $message-content-font-size;\n    font-variant: $message-content-font-variant;\n  }\n\n  // Modifier: Incoming message\n  &--incoming {\n    color: $message-incoming-color;\n    background-color: $message-incoming-bg-color;\n    margin-right: auto;\n\n    & #{$message-class}__avatar {\n      margin: $message-incoming-avatar-margin;\n    }\n\n    & #{$message-class}__content-wrapper {\n    }\n\n    & #{$message-class}__sender-name {\n      @if $show-message-incoming-sender-name {\n        display: block;\n      } @else {\n        display: none;\n      }\n    }\n\n    & #{$message-class}__sent-time {\n      @if $show-message-incoming-sent-time {\n        display: block;\n      } @else {\n        display: none;\n      }\n    }\n\n    // Incoming message content\n    & #{$message-class}__content {\n      color: $message-content-incoming-color;\n      background-color: $message-content-incoming-bg-color;\n      border-radius: $message-incoming-content-border-radius;\n    }\n  }\n\n  // Modifier: Outgoing message\n  &--outgoing {\n    color: $message-outgoing-color;\n    background-color: $message-outgoing-bg-color;\n    margin-left: auto;\n    justify-content: flex-end;\n\n    & #{$message-class}__avatar {\n      order: 1;\n      margin: $message-outgoing-avatar-margin;\n    }\n\n    & #{$message-class}__content-wrapper {\n    }\n\n    & #{$message-class}__sender-name {\n      @if $show-message-outgoing-sender-name {\n        display: block;\n      } @else {\n        display: none;\n      }\n    }\n\n    & #{$message-class}__sent-time {\n      @if $show-message-outgoing-sent-time {\n        display: block;\n      } @else {\n        display: none;\n      }\n    }\n\n    // Outgoing message content\n    & #{$message-class}__content {\n      color: $message-content-outgoing-color;\n      background-color: $message-content-outgoing-bg-color;\n      border-radius: $message-outgoing-content-border-radius;\n    }\n  }\n\n  // Modifier: Single incoming message\n  &#{$message-class}--incoming#{$message-class}--single {\n    border-radius: $message-incoming-single-border-radius;\n\n    // Top margin for monologue (only when its not first message in conversation)\n    &:not(:first-child) {\n      margin-top: $message-monologue-margin-top;\n    }\n\n    & #{$message-class}__avatar {\n\n    }\n\n    & #{$message-class}__content-wrapper {\n    }\n\n    & #{$message-class}__sender-name {\n      @if $show-message-incoming-single-sender-name {\n        display: block;\n      }\n    }\n\n    & #{$message-class}__sent-time {\n      @if $show-message-incoming-single-sent-time {\n        display: block;\n      } @else {\n        display: none;\n      }\n    }\n\n    #{$message-class}__content {\n      border-radius: $message-incoming-content-single-border-radius;\n    }\n  }\n\n  // Modifier: First incoming message\n  &#{$message-class}--incoming#{$message-class}--first {\n    border-radius: $message-incoming-first-border-radius;\n\n    // Top margin for monologue (only when its not first message in conversation)\n    &:not(:first-child) {\n      margin-top: $message-monologue-margin-top;\n    }\n    \n    & #{$message-class}__content-wrapper {\n    }\n\n    & #{$message-class}__sender-name {\n      @if $show-message-incoming-first-sender-name {\n        display: block;\n      }\n    }\n\n    & #{$message-class}__sent-time {\n      @if $show-message-incoming-first-sent-time {\n        display: block;\n      } @else {\n        display: none;\n      }\n    }\n\n    #{$message-class}__content {\n      border-radius: $message-incoming-content-first-border-radius;\n      background-color: $message-content-incoming-bg-color;\n    }\n  }\n\n  // Modifier: Last incoming message\n  &#{$message-class}--incoming#{$message-class}--last {\n    border-radius: $message-incoming-last-border-radius;\n\n    & #{$message-class}__avatar {\n      \n    }\n\n    & #{$message-class}__content-wrapper {\n    }\n\n    & #{$message-class}__sender-name {\n      @if $show-message-incoming-last-sender-name {\n        display: block;\n      }\n    }\n\n    & #{$message-class}__sent-time {\n      @if $show-message-incoming-last-sent-time {\n        display: block;\n      } @else {\n        display: none;\n      }\n    }\n\n    #{$message-class}__content {\n      border-radius: $message-incoming-content-last-border-radius;\n    }\n  }\n\n  // Modifier: Single outgoing message\n  &#{$message-class}--outgoing#{$message-class}--single {\n    border-radius: $message-outgoing-single-border-radius;\n\n    // Top margin for monologue (only when its not first message in conversation)\n    &:not(:first-child) {\n      margin-top: $message-monologue-margin-top;\n    }\n\n    & #{$message-class}__avatar {\n      \n    }\n\n    & #{$message-class}__content-wrapper {\n    }\n\n    & #{$message-class}__sender-name {\n      @if $show-message-outgoing-single-sender-name {\n        display: block;\n      }\n    }\n\n    & #{$message-class}__sent-time {\n      @if $show-message-outgoing-single-sent-time {\n        display: block;\n      } @else {\n        display: none;\n      }\n    }\n\n    #{$message-class}__content {\n      border-radius: $message-outgoing-content-single-border-radius;\n    }\n  }\n\n  // Modifier: First outgoing message\n  &#{$message-class}--outgoing#{$message-class}--first {\n    border-radius: $message-outgoing-first-border-radius;\n    \n    margin-top: $message-monologue-margin-top;\n    \n    & #{$message-class}__avatar {\n      \n    }\n\n    & #{$message-class}__content-wrapper {\n    }\n\n    & #{$message-class}__sender-name {\n      @if $show-message-outgoing-first-sender-name {\n        display: block;\n      }\n    }\n\n    & #{$message-class}__sent-time {\n      @if $show-message-outgoing-first-sent-time {\n        display: block;\n      } @else {\n        display: none;\n      }\n    }\n\n    #{$message-class}__content {\n      border-radius: $message-outgoing-content-first-border-radius;\n      background-color: $message-content-outgoing-bg-color;\n    }\n  }\n\n  // Modifier: Last outgoing message\n  &#{$message-class}--outgoing#{$message-class}--last {\n    border-radius: $message-outgoing-last-border-radius;\n\n    & #{$message-class}__avatar {\n      \n    }\n\n    & #{$message-class}__content-wrapper {\n    }\n\n    & #{$message-class}__sender-name {\n      @if $show-message-outgoing-last-sender-name {\n        display: block;\n      }\n    }\n\n    & #{$message-class}__sent-time {\n      @if $show-message-outgoing-last-sent-time {\n        display: block;\n      } @else {\n        display: none;\n      }\n    }\n\n    #{$message-class}__content {\n      border-radius: $message-outgoing-content-last-border-radius;\n    }\n  }\n  \n  // Free space instead of avatar\n  &--incoming#{$message-class}--avatar-spacer {\n    margin-left: $_message-avatar-offset;\n  }\n\n  &--outgoing#{$message-class}--avatar-spacer {\n    margin-right: $_message-avatar-offset;\n  }\n  \n  // Avatar position\n  // By default incoming and default message has avatar on left and outoging has avatar on right.\n  // This can be changed by adding --avatar-left or avatar-right modifier\n  &--avatar-tl {\n\n    #{$message-class}__avatar {\n      justify-content:flex-start;\n      order:0;\n      margin-right: $message-avatar-horizontal-margin;\n      margin-left:0;\n    }\n    \n    #{$message-class}__message-wrapper {\n      order:1;\n    }\n\n  }\n\n  &--avatar-tr {\n    #{$message-class}__avatar {\n      justify-content:flex-start;\n      order:1;\n      margin-left: $message-avatar-horizontal-margin;\n      margin-right:0;\n    }\n    #{$message-class}__message-wrapper {\n      order:0;\n    }\n  }\n\n  &--avatar-br {\n\n    #{$message-class}__avatar {\n      justify-content:flex-end;\n      order:1;\n      margin-left: $message-avatar-horizontal-margin;\n      margin-right:0;\n    }\n\n    #{$message-class}__message-wrapper {\n      order:0;\n    }\n\n  }\n\n  &--avatar-bl {\n\n    #{$message-class}__avatar {\n      justify-content:flex-end;\n      order:0;\n      margin-right: $message-avatar-horizontal-margin;\n      margin-left:0;\n    }\n\n    #{$message-class}__message-wrapper {\n      order:1;\n    }\n\n  }\n\n  &--avatar-cl {\n\n    #{$message-class}__avatar {\n      justify-content:center;\n      order:0;\n      margin-right: $message-avatar-horizontal-margin;\n      margin-left:0;\n    }\n\n    #{$message-class}__message-wrapper {\n      order:1;\n    }\n\n  }\n\n  &--avatar-cr {\n\n    #{$message-class}__avatar {\n      justify-content:center;\n      order:1;\n      margin-left: $message-avatar-horizontal-margin;\n      margin-right:0;\n    }\n\n    #{$message-class}__message-wrapper {\n      order:0;\n    }\n\n  }\n  \n}\n","@import \"../variables\";\n@import \"../helpers/mixins\";\n\n\n// Positions\n$_message-group-avatar-justify-content: flex-end;\n\n/********** Styles **********/\n.#{$prefix}-message-group {\n  \n  // Local alias\n  $group-class: &;\n  $message-class: #{$prefix}-message;\n  $avatar-class: #{$prefix}-avatar;\n\n  box-sizing: border-box;\n  @include flex-row;\n  margin: $message-group-margin;\n  \n  &__avatar {\n    box-sizing: border-box;\n    @include flex-column;\n    justify-content: $_message-group-avatar-justify-content;\n  }\n  \n  // Container for header, message and footer\n  &__content {\n    box-sizing: border-box;\n    @include flex-column;\n  }\n  \n  &__header {\n    box-sizing: border-box;\n    display:flex;\n    font-size: $message-group-header-font-size;\n    font-family: $message-group-header-font-family;\n    color: $message-group-header-color;\n    background-color: $message-group-header-bg-color;\n    margin: $message-group-header-margin;\n    padding: $message-group-header-padding;\n  }\n  \n  &__footer {\n    box-sizing: border-box;\n    display:flex;\n    font-size: $message-group-footer-font-size;\n    font-family: $message-group-footer-font-family;\n    color: $message-group-footer-color;\n    background-color: $message-group-footer-bg-color;\n    margin: $message-group-footer-margin;\n    padding: $message-group-footer-padding;\n  }\n  \n  &__messages {\n    box-sizing: border-box;\n    // First message in group\n    .#{$prefix}-message:first-child {\n      margin-top:0;\n    }\n\n    // Every message in group\n    .#{$prefix}-message {\n      .#{$message-class}__content {\n        background-color: $message-group-message-content-bg-color;\n        margin-top:0;\n      }\n    }\n    \n    // Last message in group\n    .#{$prefix}-message:last-child {\n\n    }\n\n  }\n  \n  // Modifier - group of incoming messages\n  &--incoming {\n    justify-content: flex-start;\n\n    & #{$group-class}__avatar {\n      margin-right: 8px;\n      order: 0;\n    }\n    \n    & #{$group-class}__content {\n      order:1;\n    }\n    \n    & #{$group-class}__messages {\n      \n      // First message in incoming group\n      & .#{$message-class}:first-child .#{$message-class}__content {\n        border-radius: $message-group-incoming-message-content-first-border-radius;\n      }\n\n      // Message in incoming group\n      & .#{$message-class} .#{$message-class}__content {\n        border-radius: $message-group-incoming-message-content-border-radius;\n        color: $message-group-message-content-incoming-color;\n        background-color: $message-group-message-content-incoming-bg-color;\n      }\n      \n      // Last message in incoming group\n      & .#{$message-class}:last-child .#{$message-class}__content {\n        border-radius: $message-group-incoming-message-content-last-border-radius;\n      }\n\n      // Single message in incoming group\n      // !!! only-child must be placed after last-child\n      .#{$prefix}-message:only-child .#{$message-class}__content {\n        border-radius: $message-group-incoming-message-content-single-border-radius;\n      }\n      \n    }\n    \n  }\n\n  // Modifier - group of outgoing messages\n  &--outgoing  {\n    justify-content: flex-end;\n    margin-left: auto;\n    \n    & #{$group-class}__avatar {\n      margin-left: 8px;\n      order: 1;\n    }\n\n    & #{$group-class}__content {\n      order:0;\n    }\n\n    & #{$group-class}__messages {\n\n      & .#{$message-class} {\n        justify-content: flex-end;\n      }\n      \n      // First message in outgoing group\n      & .#{$message-class}:first-child .#{$message-class}__content {\n        border-radius: $message-group-outgoing-message-content-first-border-radius;\n      }\n\n      // Message in outgoing group\n      & .#{$message-class} .#{$message-class}__content {\n        border-radius: $message-group-outgoing-message-content-border-radius;\n        color: $message-group-message-content-outgoing-color;\n        background-color: $message-group-message-content-outgoing-bg-color;\n      }\n\n      // Last message in outgoing group\n      & .#{$message-class}:last-child .#{$message-class}__content {\n        border-radius: $message-group-outgoing-message-content-last-border-radius;\n      }\n\n      // Single message in outgoing group\n      // !!! only-child must be placed after last-child\n      .#{$prefix}-message:only-child .#{$message-class}__content {\n        border-radius: $message-group-outgoing-message-content-single-border-radius;\n      }\n\n    }\n  }\n  \n  // Avatar position\n  // By default incoming and default message has avatar on left and outgoing has avatar on right.\n  // This can be changed by adding --avatar-left or avatar-right modifier\n  &--avatar-tl {\n    \n    #{$group-class}__avatar {\n      justify-content: flex-start;\n      order:0;\n      margin-right: $message-group-avatar-horizontal-margin;\n      margin-left:0;\n    }\n    \n    #{$group-class}__content {\n      order:1;\n    }\n  }\n\n  &--avatar-tr {\n    #{$group-class}__avatar {\n      justify-content: flex-start;\n      order:1;\n      margin-left: $message-group-avatar-horizontal-margin;\n      margin-right:0;\n    }\n\n    #{$group-class}__content {\n      order:0;\n    }\n  }\n\n  &--avatar-bl {\n    #{$group-class}__avatar {\n      justify-content: flex-end;\n      order:0;\n      margin-right: $message-group-avatar-horizontal-margin;\n      margin-left:0;\n    }\n\n    #{$group-class}__content {\n      order:1;\n    }\n  }\n\n  &--avatar-br {\n    #{$group-class}__avatar {\n      justify-content: flex-end;\n      order:1;\n      margin-left: $message-group-avatar-horizontal-margin;\n      margin-right:0;\n    }\n    \n    #{$group-class}__content {\n      order:0;\n    }\n  }\n\n  &--avatar-cl {\n    \n    #{$group-class}__avatar {\n      justify-content: center;\n      order:0;\n      margin-right: $message-group-avatar-horizontal-margin;\n      margin-left:0;\n    }\n\n    #{$group-class}__content {\n      order:1;\n    }\n  }\n\n  &--avatar-cr {\n    #{$group-class}__avatar {\n      justify-content: center;\n      order:1;\n      margin-left: $message-group-avatar-horizontal-margin;\n      margin-right:0;\n    }\n\n    #{$group-class}__content {\n      order:0;\n    }\n  }\n  \n}","@import \"../variables\";\n@import \"../helpers/mixins\";\n\n.#{$prefix}-message-separator {\n  box-sizing: border-box;\n  color: $message-separator-color;\n  background-color: $message-separator-bg-color;\n  font-size: $message-separator-font-size;\n  font-family: $message-separator-font-family;\n  text-align: center;\n  @include flex-row;\n  flex-wrap: nowrap;\n  justify-content: space-between;\n  align-items: center;\n  \n  &::before,\n  &::after {\n    box-sizing: border-box;\n    content: \"\";\n    background-color: $message-separator-color;\n    display: block;\n    flex-grow: 1;\n    height: 1px;\n  }\n  \n  &:not(:empty)::before {\n    margin: $message-separator-left-line-margin;\n  }\n\n  &:not(:empty)::after {\n    margin: $message-separator-right-line-margin;\n  }\n  \n}\n","@import \"../variables\";\n@import \"../helpers/mixins\";\n\n.#{$prefix}-message-list {\n  box-sizing: border-box;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n  min-height: 1em + (1em * 0.25); // Place for typing indicator\n  position: relative;\n  color: $message-list-color;\n  background-color: $message-list-bg-color;\n\n  &__scroll-wrapper {\n    box-sizing: border-box;\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    overflow: hidden;\n    /*overflow-y: scroll*/; // TODO: Uncomment this when not using fancy scroll\n    padding: $message-list-scroll-wrapper-padding;\n  }\n\n  // Scroll-to point for sticky scroll\n  &__scroll-to:first-child {\n    box-sizing: border-box;\n    float: left;\n    clear: both;\n    height: 0;\n  }\n\n  // Last message must have place for typing indicator when scrolled down to be able to read last message\n  // TODO: If fancy scroll is not used it should be nth-last-child(2).\n  //  Value 4 is set because PerfectScrollbar ads two divs at the end of container \n  &__scroll-wrapper > .#{$prefix}-message:nth-last-child(4) {\n    margin-bottom: 1.4em + (1em * 0.25) + 1em;\n  }\n\n  &__scroll-wrapper > .#{$prefix}-message-group:nth-last-child(4) {\n    margin-bottom: 1.4em + (1em * 0.25) + 1em;\n  }\n  \n  // Typing indicator (when exists)\n  & .#{$prefix}-typing-indicator {\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    // !!!! TODO: set to 20px when not using fancy scroll\n    right: 15px; \n    background-color: $message-list-typing-indicator-bg-color;\n    padding: 0.5em 0.5em;\n    font-size: 0.9em;\n    height: 1em + (1em * 0.25);\n    line-height: 1em + (1em * 0.25);\n  }\n  \n  // Because message in group cant have max-width, only if its direct child of list\n  &__scroll-wrapper > .#{$prefix}-message,\n  &__scroll-wrapper > .#{$prefix}-message-group\n  {\n    max-width: 85%;\n  }\n\n  & .#{$prefix}-message.#{$prefix}-message--incoming,\n  & .#{$prefix}-message-group.#{$prefix}-message-group--incoming,\n  {\n    margin-right: auto;\n  }\n  \n  & .#{$prefix}-message.#{$prefix}-message--outgoing,\n  & .#{$prefix}-message-group.#{$prefix}-message-group--outgoing,\n  {\n    margin-left: auto;\n  }\n\n  & .#{$prefix}-message-separator:not(:first-child) {\n    margin-top: $message-list-message-separator-margin-top;\n  }\n\n  &__loading-more {\n    box-sizing: content-box;\n    @include flex-row;\n    justify-content: center;\n    position:absolute;\n    background-color: $message-list-loading-more-bg-color;\n    padding: $message-list-loading-more-padding;\n    top:0;\n    left:0;\n    right:0;\n    height: $message-list-loading-more-height;\n    z-index: 1;\n\n    .#{$prefix}-loader {\n      width:$message-list-loading-more-height;\n      height:$message-list-loading-more-height;\n    }\n    .#{$prefix}-loader::before,\n    .#{$prefix}-loader::after\n    {\n      width:100%;\n      height:100%;\n    }\n    \n    &--bottom {\n      top:initial;\n      bottom:0;\n    }\n    \n  }\n  \n  // Perfect scrollbar fix to hide loading more indicator\n  .ps__rail-y {\n    z-index:2;\n  }\n  \n}\n","@import \"../variables\";\n@import \"../helpers/mixins\";\n\n.#{$prefix}-avatar {\n  \n  $avatar-class: &;\n  \n  position: relative;\n  width: $avatar-md-width;\n  height: $avatar-md-width;\n  border-radius: 50%;\n  box-sizing: border-box;\n  \n  & > img {\n    box-sizing: border-box;\n    width: 100%;\n    height: 100%;\n    border-radius: 50%;\n  }\n\n  &:hover {\n    > img {\n      filter: brightness(115%);\n    }\n  }\n\n  &#{&}--xs {\n    width: $avatar-xs-width;\n    height: $avatar-xs-width;\n    min-width: $avatar-xs-width;;\n    min-height: $avatar-xs-width;\n  }\n\n  &#{&}--sm {\n    width: $avatar-sm-width;\n    height: $avatar-sm-width;\n    min-width: $avatar-sm-width;;\n    min-height: $avatar-sm-width;\n  }\n  \n  &#{&}--md\n  {\n    width: $avatar-md-width;\n    height: $avatar-md-width;\n    min-width: $avatar-md-width;;\n    min-height: $avatar-md-width;\n  }\n\n  &#{&}--lg {\n    width: $avatar-lg-width;\n    height: $avatar-lg-width;\n    min-width: $avatar-lg-width;;\n    min-height: $avatar-lg-width;\n  }\n  \n    &#{&}--fluid {\n    width: $avatar-fluid-width;\n    height: $avatar-fluid-width;\n    .#{$prefix}-status {\n      right: 5%;\n      width: 22%;\n      height: 22%\n    }\n  }\n  \n  // Status position and size\n  & .#{$prefix}-status {\n    box-sizing: border-box;\n    position: absolute;\n    right:-1px;\n    bottom: 3%;\n    \n    &__bullet  {\n      box-sizing: content-box;\n      border: solid 2px #fff;\n    }\n\n    $status-class: #{$prefix}-status;\n    $bullet-class: #{$prefix}-status__bullet;\n    \n    &--xs,\n    &--xs:not(.#{$status-class}--named) {\n      \n      @include status-size(\"xs\", 1);\n      right: 0;\n      bottom: 0;\n      \n    }\n\n    &--sm,\n    &--sm:not(.#{$status-class}--named) {\n      \n      @include status-size(\"sm\", 2);\n      \n      right: -3px;\n      bottom: -1px;\n    }\n    \n    &--md,\n    &--md:not(.#{$status-class}--named) {\n      @include status-size(\"md\", 2);\n    }\n\n    &--lg,  \n    &--lg:not(.#{$status-class}--named) {\n\n      @include status-size(\"lg\", 2);\n      bottom:4%;\n      \n    }\n    \n  }\n  \n  &#{$avatar-class}--active {\n    \n  }\n}\n","@import \"../variables\";\n\n$avatar-width-short-factor: 0.618;\n\n.#{$prefix}-avatar-group {\n  $class-name: &;\n  \n  @include flex-row-reverse;\n  overflow:visible;\n  position:relative;\n  flex-wrap: wrap;\n  box-sizing: border-box;\n  min-width: $avatar-group-md-min-width;\n  align-content: flex-start;\n  justify-content: flex-end;\n  \n  .#{$prefix}-avatar--active {\n    z-index:1;\n  }\n\n  .#{$prefix}-avatar--active-on-hover:hover {\n    z-index:2;\n  }\n  \n  &--xs {\n    \n    $xs-padding: $avatar-xs-width - $avatar-xs-width * $avatar-width-short-factor;\n    padding-left: $xs-padding;\n    padding-top: $xs-padding;\n    \n      .#{$prefix}-avatar {\n        margin-top: - $xs-padding;\n        margin-left:- $xs-padding;\n        width: $avatar-xs-width;\n        height: $avatar-xs-width;\n        min-width: $avatar-xs-width;\n        min-height: $avatar-xs-width;\n        border: none;\n        border-right: 1px solid rgb(242, 242, 242);\n      }\n    \n  }\n  \n  &--sm {\n    \n    $sm-padding: $avatar-sm-width - $avatar-sm-width * $avatar-width-short-factor;\n    padding-left: $sm-padding;\n    padding-top: $sm-padding;     \n    \n      .#{$prefix}-avatar {\n        margin-top: - $sm-padding;\n        margin-left:- $sm-padding;\n        width: $avatar-sm-width;\n        height: $avatar-sm-width;\n        min-width: $avatar-sm-width;\n        min-height: $avatar-sm-width;\n      }\n  }\n\n  &--md {\n    \n    $md-padding: $avatar-md-width - $avatar-md-width * $avatar-width-short-factor;\n    padding-left: $md-padding;\n    padding-top: $md-padding;\n    \n      .#{$prefix}-avatar {\n        margin-top: - $md-padding;\n        margin-left:- $md-padding;\n        width: $avatar-md-width;\n        height: $avatar-md-width;\n        min-width: $avatar-md-width;\n        min-height: $avatar-md-width;\n        border: 2px solid rgb(242, 242, 242);\n      }\n        \n  }\n  \n  &--lg {\n    \n    $lg-padding:  $avatar-lg-width - $avatar-lg-width * $avatar-width-short-factor;\n    padding-left: $lg-padding;\n    padding-top: $lg-padding;\n    \n    .#{$prefix}-avatar {\n      margin-top: - $lg-padding;\n      margin-left:- $lg-padding;\n      width: $avatar-lg-width;\n      height: $avatar-lg-width;\n      min-width: $avatar-lg-width;\n      min-height: $avatar-lg-width;\n      border: 2px solid rgb(242, 242, 242);\n    }\n    \n  }\n  \n}","@import \"../variables\";\n@import \"../helpers/mixins\";\n\n// Overflows\n$_message-input-overflow: visible;\n$_message-input-content-editor-overflow: visible;\n\n// Don to override this value (no !default)\n$_message-input-content-editor-border-vertical-width: $message-input-content-editor-border-top-width + $message-input-content-editor-border-bottom-width;\n// Don to override this value (no !default)\n$_message-input-content-editor-border-horizontal-width: $message-input-content-editor-border-left-width + $message-input-content-editor-border-right-width;\n\n// Calculated - do not override\n$_message-input-content-editor-padding-vertical: $message-input-content-editor-container-padding-top + $message-input-content-editor-container-padding-bottom;\n$_message-input-content-editor-padding-horizontal: $message-input-content-editor-container-padding-left + $message-input-content-editor-container-padding-right;\n\n// Calculated - do not override\n$_message-input-content-editor-container-min-height: $message-input-content-editor-container-line-height + $_message-input-content-editor-padding-vertical + $_message-input-content-editor-border-vertical-width;\n\n// Calculated - do not override\n$_message-input-content-editor-container-max-height: $message-input-max-lines * $message-input-content-editor-container-line-height + $_message-input-content-editor-padding-vertical + $_message-input-content-editor-border-vertical-width;\n\n.#{$prefix}-message-input {\n\n  // Local alias\n  $message-input-class: &;\n  \n  @include flex-row;\n  position: relative;\n  background-color: $message-input-bg-color;\n  border-top: $message-input-border-top;\n  border-right: $message-input-border-right;\n  border-bottom: $message-input-border-bottom;\n  border-left: $message-input-border-left;\n  box-sizing: border-box;\n  padding: $message-input-padding;\n  overflow: $_message-input-overflow;\n  flex-shrink: 0;\n\n  &__content-editor-wrapper {\n    box-sizing: border-box;  \n    position: relative;\n    background-color: $message-input-content-editor-wrapper-bg-color;\n    margin: $message-input-content-editor-wrapper-margin;\n    padding: $message-input-content-editor-wrapper-padding;\n    border-radius: $message-input-content-editor-wrapper-border-radius;\n    flex-grow:1;\n\n    #{$message-input-class}--disabled & {\n      background-color: $message-input-content-editor-disabled-bg-color;\n      color: $message-input-content-editor-disabled-color;\n    }\n    \n  }\n  \n  &__content-editor-container {\n    box-sizing: border-box;\n    position:relative;\n    background-color: $message-input-content-editor-container-bg-color;\n    @include flex-column;\n    align-items: stretch;\n    overflow:hidden;\n    overflow-y:auto;\n    font-size: $message-input-content-editor-container-font-size;\n    line-height: $message-input-content-editor-container-line-height;\n    min-height: $_message-input-content-editor-container-min-height;\n    max-height: $_message-input-content-editor-container-max-height;\n    padding: $message-input-content-editor-container-padding;\n    scroll-padding: $message-input-content-editor-container-padding-bottom;\n    \n    #{$message-input-class}--disabled & {\n      color: $message-input-content-editor-disabled-color;\n      background-color: transparent;\n    }\n  }\n  \n  &__content-editor {\n    box-sizing: border-box;\n    flex-grow:1;\n    background-color: $message-input-content-editor-bg-color;\n    font-family: $message-input-content-editor-font-family;\n    outline: 0;\n    border-top: $message-input-content-editor-border-top;\n    border-right: $message-input-content-editor-border-right;\n    border-bottom: $message-input-content-editor-border-bottom;\n    border-left: $message-input-content-editor-border-left;\n    overflow: $_message-input-content-editor-overflow;\n    color: $message-input-content-editor-color;\n    overflow-wrap: anywhere;\n    word-break: break-word;\n    #{$message-input-class}--disabled & {\n      background-color: transparent; // Because bg color is from parent and we are using alpha\n      color: $message-input-content-editor-disabled-color;\n    }\n    \n  }\n  \n  &__content-editor[data-placeholder]:empty:before {\n    box-sizing: border-box;\n    content: attr(data-placeholder);\n    color: $message-input-placeholder-color;\n    display: block;\n    cursor:text;\n  }\n  \n  &__tools {\n    @include flex-row;\n    box-sizing: border-box;\n    .#{$prefix}-button {\n      font-size:1.2em;\n      margin-top:0;\n      margin-bottom:0;\n    }\n    \n    .#{$prefix}-button--send {\n      align-self: flex-end;\n    }\n\n    .#{$prefix}-button--attachment {\n      align-self: flex-end;\n    }\n    \n  }\n\n  &__tools:first-child {\n    .#{$prefix}-button:first-child {\n      margin-left: 0;\n    }\n    .#{$prefix}-button:last-child {\n      margin-right: 0;\n    }\n  }\n\n  &__tools:last-child {\n    .#{$prefix}-button:first-child {\n      margin-left: 0;\n    }\n    .#{$prefix}-button:last-child {\n      margin-right: 0;\n    }\n  }\n  \n}\n","@import \"../variables\";\n@import \"../helpers/mixins\";\n\n.#{$prefix}-input-toolbox {\n  box-sizing: border-box;\n  @include flex-row;\n  justify-content: flex-end;\n  margin: $input-toolbox-margin;\n  padding: $input-toolbox-padding;\n\n  & .#{$prefix}-button {\n    @include reset-button;\n    margin: $input-toolbox-btn-margin;\n    font-size: $input-toolbox-btn-font-size;\n  }\n  \n}\n","@import \"../variables\";\n@import \"../helpers/mixins\";\n\n.#{$prefix}-chat-container {\n  box-sizing: border-box;\n  @include flex-column;\n  height: 100%;\n  min-width: $chat-container-min-width; // Required for ellipsis in child elements\n  color: $chat-container-color;\n  background-color: $chat-container-bg-color;\n  \n  & .#{$prefix}-message-input {\n    border-top: $chat-container-message-input-border-top;\n    border-right: $chat-container-message-input-border-right;\n    border-bottom: $chat-container-message-input-border-bottom;\n    border-left: $chat-container-message-input-border-left;\n    \n    //box-shadow: 0px -4px 5px -5px rgba(0, 0, 0, 0.38);\n    margin-top:auto; // Message input and following elements (input toolbox) will be placed at the bottom of the chat-container\n    padding: 0.3em 0 0.3em 0em;\n    color: $chat-container-message-input-color;\n    background-color: $chat-container-message-input-bg-color;\n    \n    & .#{$prefix}-message-input__content-editor-wrapper:first-child {\n      margin-left:0.8em;\n    }\n\n    & .#{$prefix}-message-input__content-editor-wrapper:last-child {\n      margin-right:0.8em;\n    }\n    \n  }\n\n  & .#{$prefix}-input-toolbox {\n    margin: $chat-container-input-toolbox-margin;\n    padding: $chat-container-input-toolbox-padding;\n    color: $chat-container-input-toolbox-color;\n    background-color: $chat-container-input-toolbox-bg-color;\n  }\n  \n}\n\n","@import \"../variables\";\n@import \"../helpers/mixins\";\n\n.#{$prefix}-typing-indicator {\n  box-sizing: content-box;\n  font-size: $typing-indicator-font-size;\n  font-family: $typing-indicator-font-family;\n  @include flex-row;\n  align-items: stretch;\n  \n  &__indicator {\n    box-sizing: inherit;\n    background-color: $typing-indicator-indicator-bg-color;\n    @include flex-row;\n    align-items: center;\n  }\n\n  &__dot {\n    box-sizing: inherit;\n    animation: #{$prefix}-typing-indicator__typing-animation 1.5s infinite ease-in-out;\n    border-radius: 100%;\n    display: inline-block;\n    height: $typing-indicator-dot-size;\n    width: $typing-indicator-dot-size;\n    background-color: $typing-indicator-dot-bg-color;\n  }\n\n  &__dot:not(:last-child) {\n    margin-right: $typing-indicator-dot-spacing;\n  }\n\n  &__dot:nth-child(1) {\n    box-sizing: inherit;\n  }\n  &__dot:nth-child(2) {\n    animation-delay: 300ms;\n  }\n  &__dot:nth-child(3) {\n    animation-delay: 400ms;\n  }\n\n  &__text {\n    box-sizing: inherit;\n    @include text-truncate;\n    color: $typing-indicator-text-color;\n    background-color: $typing-indicator-text-bg-color;\n    margin: $typing-indicator-text-margin;\n    user-select: none;\n  }\n\n  @keyframes #{$prefix}-typing-indicator__typing-animation {\n    0% {\n      transform: translateY(0px);\n    }\n    28% {\n      transform: translateY(-5px);\n    }\n    44% {\n      transform: translateY(0px);\n    }\n  }\n}\n","@import \"../variables\";\n@import \"../helpers/mixins\";\n\n.#{$prefix}-conversation-header {\n  \n  $class-name: &;\n  \n  box-sizing: border-box;\n  color: $conversation-header-color;\n  background-color: $conversation-header-bg-color;\n  font-family: $conversation-header-font-family;\n  font-size: $conversation-header-font-size;\n  flex-shrink: 0;\n  user-select: none;\n  //box-shadow: 0px 2px 5px -2px rgba(0,0,0,0.38);\n  \n  @include flex-row;\n  align-items: stretch;\n  border-top: $conversation-header-border-top;\n  border-right: $conversation-header-border-right;\n  border-bottom: $conversation-header-border-bottom;\n  border-left: $conversation-header-border-left;\n  padding: 0.6em 0.9em;\n\n  &__back {\n    box-sizing: border-box;\n    margin-right:0.5em;\n    @include flex-row;\n    align-items: center;\n    cursor: pointer;\n    order: 1;\n    \n    button {\n      font-size: 1.4em;\n      padding:0;\n    }\n  }\n  \n  &__avatar {\n    box-sizing: border-box;\n    width: $avatar-md-width;\n    height: $avatar-md-width;\n    margin-right: 1em;\n    order: 2;\n\n    > .#{$prefix}-avatar {\n      > .#{$prefix}-status {\n        > .#{$prefix}-status__bullet {\n          border-color: $conversation-header-bg-color;\n        }\n      }\n    }\n\n    .#{$prefix}-avatar-group {\n      padding-right:0 !important;\n    }\n  }\n\n  &__content {\n    box-sizing: border-box;\n    @include flex-column;\n    order: 3;\n    flex-grow: 2;\n    justify-content: center;\n    min-width: $conversation-header-content-min-width; // Required for ellipsis in child elements\n    \n    #{$class-name}__user-name {\n      box-sizing: border-box;\n      @include text-truncate;\n      font-weight: bold;\n      color: $conversation-header-user-name-color;\n      background-color: $conversation-header-user-name-bg-color;\n    }\n\n    #{$class-name}__info {\n      box-sizing: border-box;\n      @include text-truncate;\n      color: $conversation-header-info-color;\n      background-color: $conversation-header-info-bg-color;\n      font-weight: normal;\n      font-size: 0.9em;\n    }\n    \n  }\n  \n  &__actions {\n    box-sizing: border-box;\n    @include flex-row;\n    align-items: center;\n    color: $conversation-header-actions-color;\n    background-color: $conversation-header-actions-bg-color;\n    margin: $conversation-header-actions-margin;\n    order: 4;\n    .#{$prefix}-button:not(:first-child) {\n      margin-left:0.2em;\n    }\n    \n    .#{$prefix}-button {\n      padding:0;\n    }\n    \n    .#{$prefix}-button.#{$prefix}-button--arrow,\n    .#{$prefix}-button.#{$prefix}-button--info,\n    .#{$prefix}-button.#{$prefix}-button--voicecall,\n    .#{$prefix}-button.#{$prefix}-button--videocall,\n    .#{$prefix}-button.#{$prefix}-button--star,\n    .#{$prefix}-button.#{$prefix}-button--adduser,\n    .#{$prefix}-button.#{$prefix}-button--ellipsis,\n    .#{$prefix}-button.#{$prefix}-button--ellipsis\n    {\n      font-size: 1.4em;\n      color:$conversation-header-action-button-color;\n      background-color: $conversation-header-action-button-bg-color;\n    }\n    .#{$prefix}-button.#{$prefix}-button--ellipsis {\n      font-size: 1.3em;\n    }\n    \n  }\n  \n  \n}\n","@use \"sass:math\";\n@import \"../variables\";\n@import \"../helpers/mixins\";\n@import \"../helpers/functions\";\n\n// Positions\n$_conversation-unread-top: 0.3em;\n$_conversation-unread-right: 0.8em;\n\n.#{$prefix}-conversation {\n\n  $class-name: &;\n  \n  @include flex-row;\n  box-sizing: border-box;\n  position: relative;\n  font-family: $conversation-font-family;\n  padding:  math.div($conversation-unread-font-size,2) + $_conversation-unread-top 0.8em math.div($conversation-unread-font-size,2) + $_conversation-unread-top 0.8em;\n  cursor: pointer;\n  justify-content: flex-start;\n  color: $conversation-color;\n  background-color: $conversation-bg-color;\n  user-select: none;\n  border-top: $conversation-border-top;\n  border-right: $conversation-border-right;\n  border-bottom: $conversation-border-bottom;\n  border-left: $conversation-border-left;\n\n  &:hover {\n    background-color: $conversation-hover-bg-color;\n    \n    > .#{$prefix}-avatar {\n      > .#{$prefix}-status {\n        > .#{$prefix}-status__bullet {\n          border-color: $conversation-hover-bg-color;\n        }\n      }\n    }\n\n    // Reset avatar brightness on hover\n    & > .#{$prefix}-avatar > img {\n      filter: none;\n    }\n    \n  }\n  \n  &#{&}:active {\n    \n    color: $conversation-active-color;\n    background-color: $conversation-active-bg-color;\n    border-top: $conversation-active-border-top;\n    border-right: $conversation-active-border-right;\n    border-bottom: $conversation-active-border-bottom;\n    border-left: $conversation-active-border-left;\n    \n    > .#{$prefix}-avatar {\n      > .#{$prefix}-status {\n        > .#{$prefix}-status__bullet {\n          border-color: $conversation-active-bg-color;\n        }\n      }\n    }\n    \n  }\n\n  &#{&}--active {\n    \n    color: $conversation-name-activated-color;\n    background-color: $conversation-activated-bg-color;\n    font-weight: $conversation-activated-font-weight;\n    border-top: $conversation-activated-border-top;\n    border-right: $conversation-activated-border-right;\n    border-bottom: $conversation-activated-border-bottom;\n    border-left: $conversation-activated-border-left;\n    \n    > .#{$prefix}-avatar {\n      > .#{$prefix}-status {\n        > .#{$prefix}-status__bullet {\n          border-color: $conversation-activated-bg-color;\n        }\n      }\n    }\n\n    #{$class-name}__name {\n      color: $conversation-name-activated-color;\n      font-weight: $conversation-name-activated-font-weight;\n    }\n    \n    #{$class-name}__info {\n      color: $conversation-info-activated-color;\n      font-weight: $conversation-info-activated-font-weight;\n    }\n    \n  }\n  \n  > .#{$prefix}-avatar {\n    width: $avatar-md-width + 0.1px;\n    height: $avatar-md-width + 0.1px;\n    margin-right: 1em;\n    \n    > .#{$prefix}-status {\n      \n      border-color: $conversation-bg-color;\n      \n    }\n    \n  }\n\n  > .#{$prefix}-avatar-group {\n    width: $avatar-md-width + 0.1px;\n    height: $avatar-md-width + 0.1px;\n    min-width: $avatar-md-width + 0.1px;\n    min-height: $avatar-md-width + 0.1px;\n    padding-right:0 !important;\n    margin-right: 1em;\n  }\n\n  &__content {\n    box-sizing: border-box;\n    @include flex-column;\n    overflow: hidden;\n    margin-right: 1.1em;\n    flex-grow:1;\n  }\n  \n  &__operations {\n    box-sizing: border-box;\n    @include flex-row;\n    align-items: center;\n    margin: $conversation-operations-margin;\n    color: lighten($color-text, 70);\n    visibility: hidden;\n  }\n\n  &__operations--visible {\n    visibility: visible;\n  }\n  \n  &__operations:hover {\n    color: lighten($color-text, 40);\n  }\n\n  &:hover &__operations {\n    visibility: visible;\n  }\n\n  &__name {\n    box-sizing: border-box;\n    color: $conversation-name-color;\n    font-size: 1em;\n    @include text-truncate;\n  }\n\n  &__info {\n    box-sizing: border-box;\n    color: $conversation-info-color;\n    font-size: 0.8em;\n    @include text-truncate;\n  }\n\n  &__last-sender {\n    box-sizing: border-box;\n    display:inline;\n    font-weight: $conversation-last-sender-name-font-weight;\n  }\n\n  &__info-content {\n    box-sizing: border-box;\n    display:inline;\n    font-weight: $conversation-info-content-font-weight;\n  }\n\n  &__last-activity-time {\n    box-sizing: border-box;\n    margin: $conversation-last-activity-time-margin;\n    font-size: 0.8em;\n    @include flex-row;\n    align-items: center;\n  }\n  \n  &__last-activity-time + &__operations {\n    margin-left:0.5em;\n  }\n  \n  &__unread-dot {\n    box-sizing: content-box;\n    @include flex-row;\n    align-items: center;\n    margin-right: 0.5em;\n    align-self: center;\n\n    border-radius: 50%;\n    width: $conversation-unread-dot-width;\n    min-width: $conversation-unread-dot-width;\n    height: $conversation-unread-dot-width;\n    box-shadow: 1px 1px 1px 0px rgba(179, 179, 179, 1);\n    perspective: 200px;\n    perspective-origin: 50% 50%;\n\n    background: radial-gradient(\n                    circle at 3px 3px,\n                    lighten($conversation-unread-dot-color, 17),\n                    $conversation-unread-dot-color\n    );\n    \n  }\n\n  &__unread-dot {\n    \n    &:hover::before {\n      content: \"\";\n      position: absolute;\n      top: 1%;\n      left: 5%;\n      border-radius: 50%;\n      z-index: 2;\n\n      filter: blur(0);\n      height: 80%;\n      width: 40%;\n      background: radial-gradient(\n                      circle at 130% 130%,\n                      rgba(255, 255, 255, 0) 0,\n                      rgba(255, 255, 255, 0) 46%,\n                      rgba(255, 255, 255, 0.8) 50%,\n                      rgba(255, 255, 255, 0.8) 58%,\n                      rgba(255, 255, 255, 0) 60%,\n                      rgba(255, 255, 255, 0) 100%\n      );\n\n      transform: translateX(131%) translateY(58%) rotateZ(168deg) rotateX(10deg);\n    }\n    \n    &:hover::after {\n      content: \"\";\n      position: absolute;\n      top: 5%;\n      left: 10%;\n      width: 80%;\n      height: 80%;\n      border-radius: 100%;\n      filter: blur(1px);\n      z-index: 2;\n      transform: rotateZ(-30deg);\n\n      display: block;\n      background: radial-gradient(\n                      circle at 50% 80%,\n                      rgba(255, 255, 255, 0),\n                      rgba(255, 255, 255, 0) 74%,\n                      white 80%,\n                      white 84%,\n                      rgba(255, 255, 255, 0) 100%\n      );\n\n\n      animation: #{$prefix}-unread-anim 2s ease-out infinite;\n    }\n    \n  }\n  \n  // Without max width text will not be truncated\n  &__unread {\n    box-sizing: border-box;\n    position: absolute;\n    right: $_conversation-unread-right;\n    top: $_conversation-unread-top;\n    padding: 0.01em 0.3em;\n    border-radius: 0.3em;\n    font-size: $conversation-unread-font-size;\n    font-weight: 600;\n    color: $conversation-unread-color;\n    background-color: $conversation-unread-bg-color;\n    max-width: 40 * $conversation-unread-font-size;\n    @include text-truncate;\n    z-index:100; /* For grouped Avatar */\n    \n  }\n\n  &__unread:hover::before {\n    \n  }\n  \n  @keyframes #{$prefix}-unread-anim {\n    0% {\n      transform: scale(1);\n    }\n    20% {\n      transform: scaleY(0.95) scaleX(1.05);\n    }\n    48% {\n      transform: scaleY(1.1) scaleX(0.9);\n    }\n    68% {\n      transform: scaleY(0.98) scaleX(1.02);\n    }\n    80% {\n      transform: scaleY(1.02) scaleX(0.98);\n    }\n    97%,\n    100% {\n      transform: scale(1);\n    }\n  }\n  \n}\n","@import \"../variables\";\n@import \"../helpers/mixins\";\n\n/********** Colors **********/\n\n/********** Fonts **********/\n\n/********** Styles **********/\n.#{$prefix}-conversation-list {\n  box-sizing: border-box;\n  position: relative;\n  overflow: hidden;\n  height: 100%;\n  color: $conversation-list-color;\n  background-color: $conversation-list-bg-color;\n\n  & > div > ul {\n    @include reset-list;\n  }\n  \n  &__loading-more {\n    box-sizing: content-box;\n    @include flex-row;\n    justify-content: center;\n    position:absolute;\n    background-color: $conversation-list-loading-more-bg-color;\n    padding: $conversation-list-loading-more-padding;\n    bottom:0;\n    left:0;\n    right:0;\n    height: $conversation-list-loading-more-height;\n    z-index: 1;\n\n    .#{$prefix}-loader {\n      width:$conversation-list-loading-more-height;\n      height:$conversation-list-loading-more-height;\n    }\n    .#{$prefix}-loader::before,\n    .#{$prefix}-loader::after\n    {\n      width:100%;\n      height:100%;\n    }\n\n  }\n\n  // Perfect scrollbar fix to hide loading more indicator\n  .ps__rail-y {\n    z-index:2;\n  }\n  \n}\n","@import \"../variables\";\n@import \"../helpers/mixins\";\n\n.#{$prefix}-status {\n\n  box-sizing: border-box;\n  $status-class: &;\n  $bullet-class: #{$status-class}__bullet;\n  $name-class: #{$status-class}__name;\n  \n  position:relative;\n  @include flex-row;\n  align-items: center;\n  flex-wrap: nowrap;\n  font-size: $status-md-fontsize;\n  \n  #{$bullet-class} {\n    box-sizing: content-box;\n    width: $status-md-width;\n    height: $status-md-width;\n    border-radius: 50%;\n    position: relative;\n\n    // Bubble\n    perspective: 200px;\n    perspective-origin: 50% 50%;\n    // End Bubble\n    \n  }\n  \n  &--selected {\n    color: $status-selected-color;\n    background-color: $status-selected-bg-color;\n  }\n  \n  &--named {\n    width: auto;\n    height:auto;\n  }\n  \n  &__name {\n    margin: $status-name-margin;\n    line-height: 1.5;\n  }\n  \n  @at-root .#{$prefix}-avatar:hover #{$bullet-class}:before,\n  &:hover #{$bullet-class}:before {\n    box-sizing: border-box;\n    content: \"\";\n    position: absolute;\n    top: 1%;\n    left: 5%;\n    border-radius: 50%;\n    z-index: 2;\n\n    filter: blur(0);\n    height: 80%;\n    width: 40%;\n    background: radial-gradient(\n                    circle at 130% 130%,\n                    rgba(255, 255, 255, 0) 0,\n                    rgba(255, 255, 255, 0) 46%,\n                    rgba(255, 255, 255, 0.8) 50%,\n                    rgba(255, 255, 255, 0.8) 58%,\n                    rgba(255, 255, 255, 0) 60%,\n                    rgba(255, 255, 255, 0) 100%\n    );\n\n    transform: translateX(131%) translateY(58%) rotateZ(168deg) rotateX(10deg);\n  }\n  \n  @at-root .#{$prefix}-avatar:hover #{$bullet-class}:after, // For hover on parent avatar\n  &:hover #{$bullet-class}:after {\n    box-sizing: border-box;\n    content: \"\";\n    position: absolute;\n    top: 5%;\n    left: 10%;\n    width: 80%;\n    height: 80%;  \n    border-radius: 100%;\n    filter: blur(1px);\n    z-index: 2;\n    transform: rotateZ(-30deg);\n\n    display: block;\n    background: radial-gradient(\n                    circle at 50% 80%,\n                    rgba(255, 255, 255, 0),\n                    rgba(255, 255, 255, 0) 74%,\n                    white 80%,\n                    white 84%,\n                    rgba(255, 255, 255, 0) 100%\n    );\n    \n\n    animation: #{$prefix}-bubble-anim 2s ease-out infinite;\n  }\n  \n  \n  &--available {\n\n    #{$bullet-class} {\n      background: radial-gradient(\n                      circle at 3px 3px,\n                      lighten($status-available-color, 10),\n                      $status-available-color\n      );\n    }\n    \n    #{$name-class} {\n      color: $status-available-name-color;\n    }\n    \n  }\n     \n  &--unavailable {\n    #{$bullet-class} {\n      background: radial-gradient(\n                      circle at 3px 3px,\n                      lighten($status-unavailable-color, 25),\n                      $status-unavailable-color\n      );\n    }\n\n    #{$name-class} {\n      color: $status-unavailable-name-color;\n    }\n    \n  }\n  \n  &--away {\n\n    #{$bullet-class} {\n      background: radial-gradient(\n                      circle at 3px 3px,\n                      lighten($status-away-color, 35),\n                      $status-away-color\n      );\n    }\n\n    #{$name-class} {\n      color: $status-away-name-color;\n    }\n    \n  }\n  \n  &--dnd {\n\n    #{$bullet-class} {\n      background-color: $status-dnd-color;\n      background: radial-gradient(\n                      circle at 3px 3px,\n                      lighten($status-dnd-color, 30),\n                      $status-dnd-color\n      );\n    }\n    \n    #{$name-class} {\n      color: $status-dnd-name-color;\n    }\n    \n  }\n\n  &--invisible {\n    #{$bullet-class} {\n      background-color: $status-invisible-color;\n      background: radial-gradient(\n                      circle at 3px 3px,\n                      lighten($status-invisible-color, 25),\n                      $status-invisible-color\n      );\n    }\n\n    #{$name-class} {\n      color: $status-invisible-name-color;\n    }\n  }\n  \n  // Eager to chat\n  &--eager {\n    #{$bullet-class} {\n      background: radial-gradient(\n                      circle at 3px 3px,\n                      lighten($status-eager-color, 40),\n                      $status-eager-color\n      );\n    }\n\n    #{$name-class} {\n      color: $status-eager-name-color;\n    }\n    \n  }\n  \n  // Sized\n  &--xs:not(&--named) {\n    @include status-size(\"xs\");\n  }\n\n  &--sm:not(&--named) {\n    @include status-size(\"sm\");\n  }\n\n  &--md:not(&--named) {\n    @include status-size(\"md\");\n  }\n\n  &--lg:not(&--named) {\n    @include status-size(\"lg\");\n  }\n\n  &--fluid {\n    width: $status-fluid-width;\n    height: $status-fluid-width;\n    #{$bullet-class} {\n      width: $status-fluid-width;\n      min-width: $status-fluid-width;\n      height: $status-fluid-width;\n    }\n  }\n  \n  @keyframes #{$prefix}-bubble-anim {\n    0% {\n      transform: scale(1);\n    }\n    20% {\n      transform: scaleY(0.95) scaleX(1.05);\n    }\n    48% {\n      transform: scaleY(1.1) scaleX(0.9);\n    }\n    68% {\n      transform: scaleY(0.98) scaleX(1.02);\n    }\n    80% {\n      transform: scaleY(1.02) scaleX(0.98);\n    }\n    97%,\n    100% {\n      transform: scale(1);\n    }\n  }\n    \n}\n","@import \"../variables\";\n@import \"../helpers/mixins\";\n\n// Sidebar variables\n\n.#{$prefix}-sidebar {\n\n  box-sizing: border-box;\n  position: relative;\n  overflow: hidden;\n  height: 100%;\n  @include flex-column;\n  \n  \n  // For now left and right modifiers are only for indicate on what side sidebar should be placed inside container\n  &--left {\n    background-color: $sidebar-left-bg-color;\n  }\n  \n  &--right {\n    background-color: $sidebar-right-bg-color;\n  }\n  \n  & .#{$prefix}-expansion-panel + .#{$prefix}-expansion-panel {\n    border-top:0;\n  }\n  \n}\n","@import \"../variables\";\n@import \"../helpers/mixins\";\n\n.#{$prefix}-expansion-panel {\n\n  $panel-class: &;\n  box-sizing: border-box;\n  @include flex-column;\n  color: $expansion-panel-color;\n  background-color: $expansion-panel-bg-color;\n  border: $expansion-panel-border;\n  \n  font-family: $expansion-panel-font-family;\n  font-weight: $expansion-panel-font-weight;\n  font-size: $expansion-panel-font-size;\n  font-variant: $expansion-panel-font-variant;\n  \n  &__header {\n    box-sizing: border-box;\n    @include flex-row;\n    color: $expansion-panel-header-color;\n    background-color: $expansion-panel-header-bg-color;\n    font-family: $expansion-panel-header-font-family;\n    font-weight: $expansion-panel-header-font-weight;\n    font-size: $expansion-panel-header-font-size;\n    font-variant: $expansion-panel-header-font-variant;\n    user-select: none;\n    padding: 0.8em 0.8em;\n    align-items: center;\n    user-select:none;\n    cursor:pointer;\n  }\n\n  &__header:hover {\n    color:$expansion-panel-header-hover-color;\n    background-color: $expansion-panel-header-hover-bg-color;\n  }\n\n  &__title {\n    box-sizing: border-box;\n    flex-grow:1;\n  }\n\n  &__icon {\n    box-sizing: border-box;\n    margin-left:1em;\n    margin-right:0.5em;\n  }\n  \n  &__content {\n    display:none;\n    color: $expansion-panel-content-color;\n    background-color: $expansion-panel-content-bg-color;\n    font-family: $expansion-panel-content-font-family;\n    font-weight: $expansion-panel-content-font-weight;\n    font-size: $expansion-panel-content-font-size;\n    font-variant: $expansion-panel-content-font-variant;\n    padding: 0.4em 0.8em;\n  }\n  \n  &--open &__content {\n    display:block;\n    color: $expansion-panel-content-open-color;\n    background-color:$expansion-panel-content-open-bg-color;\n  }\n\n  &--closed &__content {\n    display:none;\n  }\n  \n  &--open &__header {\n      color: $expansion-panel-header-open-color;\n      background-color:$expansion-panel-header-open-bg-color;\n  }\n  \n  &--closed {\n    \n  }\n  \n}","@import \"../variables\";\n@import \"../helpers/mixins\";\n\n.#{$prefix}-search {\n\n  box-sizing: border-box;\n  @include flex-row;\n  @include reset-spacing;\n  background-color: $search-bg-color;\n  align-items: center;\n  position: relative;\n  border-radius: $search-border-radius;\n  padding: 0.6em 0.9em;\n  font-size: $search-font-size;\n  font-family: $search-font-family;\n  \n  &__input {\n    box-sizing: border-box;\n    order:1;\n    color: $search-color;\n    border:none;\n    width:100%;\n    min-width: 0; // FF fix\n    outline:0;\n    margin-right:0.5em;\n    background-color:$search-input-bg-color;\n    font-size: $search-input-font-size;\n    font-family: $search-input-font-family;\n  }\n\n  &__input:disabled {\n    color: $search-disabled-color;\n    background-color:$search-input-disabled-bg-color;\n  }\n\n  &__input::placeholder {\n    color: $search-placeholder-color;\n  }\n  \n  &__search-icon {\n    box-sizing: border-box;\n    order:0;\n    display:block;\n    margin-right:0.5em;\n    color: $search-icon-color;\n  }\n\n  &__clear-icon {\n    box-sizing: border-box;\n    &:hover {\n      color: $search-clear-icon-color-hover;\n      cursor: pointer;\n    }\n    order: 2;\n    color: $search-clear-icon-color;\n    visibility:hidden;\n    \n    &--active {\n      visibility: visible;\n    }\n  }\n  \n  &--disabled {\n    opacity: $search-disabled-opacity;\n    color: $search-disabled-color;\n    background-color: $search-disabled-bg-color;\n  }\n  \n}\n","@import \"../variables\";\n\n.#{$prefix}-button {\n  \n  // Local alias\n  $button-class: &;\n\n  box-sizing: border-box;\n  display: inline-block;\n  vertical-align: middle;\n  text-align: center;\n  color: $button-color;\n  background-color: $button-bg-color;\n  border: none;\n  border-radius: $button-border-radius;\n  margin: $button-margin;\n  padding: $button-padding;\n  outline: none;\n  font-size: $button-font-size;\n  line-height: $button-line-height;\n\n  &:focus {\n    outline:none;\n  }\n  \n  &:disabled {\n    opacity: $button-disabled-opacity;\n  }\n  \n  &:not(:disabled) {\n    cursor:pointer;\n  }\n\n  &#{$button-class}--border {\n    border: $button-border;  \n  }\n  \n  &:hover:not(:disabled) {\n    opacity: $button-hover-opacity;\n  }\n  \n  &#{$button-class}--right {\n    > svg[data-icon]:first-child {\n      margin-right:0.5em;\n    }\n  }\n\n  &#{$button-class}--left {\n    >svg[data-icon]:last-child {\n      margin-left:0.5em;\n    }\n  }\n\n  &--adduser {\n    color: $button-adduser-color;\n    background-color: $button-adduser-bg-color;\n  }\n  \n  &--arrow {\n    color: $button-arrow-color;\n    background-color: $button-arrow-bg-color;\n  }\n\n  &--ellipsis {\n    color: $button-ellipis-color;\n    background-color: $button-ellipis-bg-color;\n  }\n  \n  &--info {\n    color: $button-info-color;\n    background-color: $button-info-bg-color;\n  }\n\n  &--star {\n    color: $button-star-color;\n    background-color: $button-star-bg-color;\n  }\n\n  &--videocall {\n    color: $button-videocall-color;\n    background-color: $button-videocall-bg-color;\n  }\n  \n  &--voicecall {\n    color: $button-voicecall-color;\n    background-color: $button-voicecall-bg-color;\n  }\n\n  &--send {\n    color: $button-send-color;\n    background-color: $button-send-bg-color;\n  }\n\n  &--attachment {\n    color: $button-attachment-color;\n    background-color: $button-attachment-bg-color;\n  }\n  \n}\n\n","@use \"sass:math\";\n@import \"../variables\";\n\n.#{$prefix}-loader {\n  box-sizing: border-box;\n  display:inline-flex;\n  position:relative;\n  font-size:1em;\n  width:$loader-width;\n  height: $loader-height;\n  color: $loader-color;\n  background-color: $loader-bg-color;\n  \n  &::before,\n  &::after {\n    box-sizing: border-box;\n    display:block;\n    width: $loader-width;\n    height: $loader-height;\n    margin: 0 0 0 ( math.div($loader-width, 2) * -1 ); // Center horizontally\n  }\n  \n  // Background circle\n  &::before {\n    position: absolute;\n    content: \"\";\n    top: 0;\n    left: 50%;\n    border-radius:50%;\n    border-color: $loader-spinner-bg-color;\n    border-style: solid;\n    border-width: $loader-border-width;\n    //box-shadow: 0 0 2px $loader-spinner-bg-color;\n  }\n  \n  // Animated \"circle\"\n  &::after {\n    position: absolute;\n    content: \"\";\n    top: 0;\n    left: 50%;\n    animation: loader-default .6s linear;\n    animation-iteration-count: infinite;\n    border-radius: 50%;\n    border-color: $loader-spinner-color  transparent transparent transparent;\n    border-style: solid;\n    border-width: $loader-border-width;\n    box-shadow: 0 0 0 transparent;\n  }\n  \n  &--content {\n    width:auto;\n    height:auto;\n    padding-top: $loader-height + 0.8em;\n  }\n  \n  // Variant or future use\n  &--variant-default {\n    \n  }\n  \n}\n\n@keyframes loader-default {\n  to { transform: rotate(360deg); }\n}\n","@import \"../variables\";\n\n.#{$prefix}-overlay {\n\n  box-sizing: border-box;\n  @include flex-row;\n  justify-content: center;\n  align-items: center;\n  position:absolute;\n  top:0;\n  left:0;\n  right:0;\n  bottom:0;\n  backdrop-filter: blur(10%);\n\n  // Content must be above opacity layer\n  &__content {\n    z-index: 220;\n  }\n  \n  // Opacity layer\n  &::before {\n    box-sizing: border-box;\n    content: \"\";\n    background-color: $overlay-bg-color;\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    z-index: 200;\n  }\n  \n  &--blur::before {\n    backdrop-filter: blur(2px);\n  }\n  \n  &--grayscale::before {\n    backdrop-filter: grayscale(50%);\n  }\n}","@import \"../variables\";\n@import \"../helpers/mixins\";\n\n.#{$prefix}-status-list {\n  \n  $status-class: #{$prefix}-status;\n\n  box-sizing: border-box;\n  list-style-type: none;\n  margin: $status-list-margin;\n  padding: $status-list-padding;\n  color: $status-list-color;\n  background-color: $status-list-bg-color;\n  \n  > li {\n    box-sizing: border-box;\n    cursor:pointer;\n    user-select: none;\n\n    > .#{$status-class} {\n\n      margin: $status-list-item-margin;\n      padding: $status-list-item-padding;\n      width:auto;\n      height:auto;\n\n    }\n\n    .#{$status-class}--selected {\n      color: $status-list-item-selected-color;\n      background-color: $status-list-item-selected-bg-color;\n\n      .#{$status-class}__name {\n        color: $status-list-item-selected-color;\n        background-color: $status-list-item-selected-bg-color;\n      }\n      \n    }\n  \n    &:hover {\n      color: $status-list-item-hover-color;\n      background-color: $status-list-item-hover-bg-color;  \n    }\n    \n    &:focus {\n      color: $status-list-item-focus-color;\n      background-color: $status-list-item-focus-bg-color;\n    }\n    \n    &:active {\n      color: $status-list-item-active-color;\n      background-color: $status-list-item-active-bg-color;\n    }\n  }\n  \n  &--xs {\n    >  li  {\n      > .#{$status-class} {\n        @include status-size(\"xs\", $named: true);\n      }\n    }\n  }\n  \n  &--sm {\n    >  li  {\n      > .#{$status-class} {\n        @include status-size(\"sm\", $named: true);\n      }\n    }\n  }\n\n  &--md {\n    >  li  {\n      > .#{$status-class} {\n        @include status-size(\"md\", $named: true);\n      }\n    }\n  }\n  \n  \n  &--lg {\n    >  li  {\n      > .#{$status-class} {\n        @include status-size(\"lg\", $named: true);\n      }\n    }\n  }\n  \n}","@import \"../variables\";\n\n// Container style\n.ps {\n  overflow: hidden !important;\n  overflow-anchor: none;\n  -ms-overflow-style: none;\n  touch-action: auto;\n  -ms-touch-action: auto;\n}\n\n// Scrollbar rail styles\n.ps__rail-x {\n  display: none;\n  opacity: 0;\n  transition: background-color .2s linear, opacity .2s linear;\n  -webkit-transition: background-color .2s linear, opacity .2s linear;\n  height: 15px;\n  // there must be 'bottom' or 'top' for ps__rail-x\n  bottom: 0px;\n  // please don't change 'position'\n  position: absolute;\n}\n\n.ps__rail-y {\n  display: none;\n  opacity: 0;\n  transition: background-color .2s linear, opacity .2s linear;\n  -webkit-transition: background-color .2s linear, opacity .2s linear;\n  width: 15px;\n  // there must be 'right' or 'left' for ps__rail-y\n  right: 0;\n  // https://github.com/mdbootstrap/perfect-scrollbar/issues/792#issue-335195410\n  // Ugly but working fix\n  left:auto !important;\n  // end of ugly fix\n  // please don't change 'position'\n  position: absolute;\n}\n\n.ps--active-x > .ps__rail-x,\n.ps--active-y > .ps__rail-y {\n  display: block;\n  background-color: transparent;\n}\n\n.ps:hover > .ps__rail-x,\n.ps:hover > .ps__rail-y,\n.ps--focus > .ps__rail-x,\n.ps--focus > .ps__rail-y,\n.ps--scrolling-x > .ps__rail-x,\n.ps--scrolling-y > .ps__rail-y {\n  opacity: 0.6;\n}\n\n.ps .ps__rail-x:hover,\n.ps .ps__rail-y:hover,\n.ps .ps__rail-x:focus,\n.ps .ps__rail-y:focus,\n.ps .ps__rail-x.ps--clicking,\n.ps .ps__rail-y.ps--clicking {\n  background-color: #eee;\n  background-color: $color-primary-light;\n  opacity: 0.9;\n}\n\n// Scrollbar thumb styles\n.ps__thumb-x {\n  background-color: $color-primary-dark;\n  border-radius: 6px;\n  transition: background-color .2s linear, height .2s ease-in-out;\n  -webkit-transition: background-color .2s linear, height .2s ease-in-out;\n  height: 6px;\n  // there must be 'bottom' for ps__thumb-x\n  bottom: 2px;\n  // please don't change 'position'\n  position: absolute;\n}\n\n.ps__thumb-y {\n  background-color: $color-primary;\n  border-radius: 6px;\n  transition: background-color .2s linear, width .2s ease-in-out;\n  -webkit-transition: background-color .2s linear, width .2s ease-in-out;\n  width: 6px;\n  // there must be 'right' for ps__thumb-y\n  right: 2px;\n  // please don't change 'position'\n  position: absolute;\n}\n\n.ps__rail-x:hover > .ps__thumb-x,\n.ps__rail-x:focus > .ps__thumb-x,\n.ps__rail-x.ps--clicking .ps__thumb-x {\n  background-color: $color-primary;\n  height: 11px;\n}\n\n.ps__rail-y:hover > .ps__thumb-y,\n.ps__rail-y:focus > .ps__thumb-y,\n.ps__rail-y.ps--clicking .ps__thumb-y {\n  background-color: $color-primary;\n  width: 11px;\n}\n\n// MS supports\n@supports (-ms-overflow-style: none) {\n  .ps {\n    overflow: auto !important;\n  }\n}\n\n@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {\n  .ps {\n    overflow: auto !important;\n  }\n}\n\n.scrollbar-container {\n  position: relative;\n  height: 100%;\n}\n",".tnc {\n  .text-center {\n    align-content: center;\n  }\n}"],"names":[],"sourceRoot":""}