{"version":3,"sources":["file:///home/runner/work/chat-ui-kit-styles/chat-ui-kit-styles/themes/default/components/_main-container.scss","file:///home/runner/work/chat-ui-kit-styles/chat-ui-kit-styles/themes/default/helpers/_mixins.scss","file:///home/runner/work/chat-ui-kit-styles/chat-ui-kit-styles/themes/default/_variables.scss","file:///home/runner/work/chat-ui-kit-styles/chat-ui-kit-styles/themes/default/components/_message.scss","file:///home/runner/work/chat-ui-kit-styles/chat-ui-kit-styles/themes/default/components/_message-group.scss","file:///home/runner/work/chat-ui-kit-styles/chat-ui-kit-styles/themes/default/components/_message-separator.scss","file:///home/runner/work/chat-ui-kit-styles/chat-ui-kit-styles/themes/default/components/_message-list.scss","file:///home/runner/work/chat-ui-kit-styles/chat-ui-kit-styles/themes/default/components/_avatar.scss","file:///home/runner/work/chat-ui-kit-styles/chat-ui-kit-styles/themes/default/components/_avatar-group.scss","file:///home/runner/work/chat-ui-kit-styles/chat-ui-kit-styles/themes/default/components/_message-input.scss","file:///home/runner/work/chat-ui-kit-styles/chat-ui-kit-styles/themes/default/components/_input-toolbox.scss","file:///home/runner/work/chat-ui-kit-styles/chat-ui-kit-styles/themes/default/components/_chat-container.scss","file:///home/runner/work/chat-ui-kit-styles/chat-ui-kit-styles/themes/default/components/_typing-indicator.scss","file:///home/runner/work/chat-ui-kit-styles/chat-ui-kit-styles/themes/default/components/_conversation-header.scss","file:///home/runner/work/chat-ui-kit-styles/chat-ui-kit-styles/themes/default/components/_conversation.scss","file:///home/runner/work/chat-ui-kit-styles/chat-ui-kit-styles/themes/default/components/_conversation-list.scss","file:///home/runner/work/chat-ui-kit-styles/chat-ui-kit-styles/themes/default/components/_status.scss","file:///home/runner/work/chat-ui-kit-styles/chat-ui-kit-styles/themes/default/components/_sidebar.scss","file:///home/runner/work/chat-ui-kit-styles/chat-ui-kit-styles/themes/default/components/_expansion-panel.scss","file:///home/runner/work/chat-ui-kit-styles/chat-ui-kit-styles/themes/default/components/_search.scss","file:///home/runner/work/chat-ui-kit-styles/chat-ui-kit-styles/themes/default/components/_buttons.scss","file:///home/runner/work/chat-ui-kit-styles/chat-ui-kit-styles/themes/default/components/_loader.scss","file:///home/runner/work/chat-ui-kit-styles/chat-ui-kit-styles/themes/default/components/_overlay.scss","file:///home/runner/work/chat-ui-kit-styles/chat-ui-kit-styles/themes/default/components/_status-list.scss","file:///home/runner/work/chat-ui-kit-styles/chat-ui-kit-styles/themes/default/components/_perfect-scrollbar.scss"],"names":[],"mappings":"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vBT,WAAA,CACA,UAAA,CACA,WAAA,CACA,SAAA,CACA,iBAAA,CACA,wBjBKY,CiBJZ,cjBgrBqB,CiB/qBrB,mBjB8qBuB,CiB3qBzB,2BACE,qBjBckB,CiBblB,wBjBFY,CiBKd,oCACE,qBjBOS,CiBRX,+BACE,qBjBOS,CiBJX,wBACE,qBAAA,CACA,OAAA,CACA,aAAA,CACA,iBAAA,CACA,ajBZiB,CiBenB,uBACE,qBAAA,CAKA,OAAA,CACA,ajBtBiB,CiBuBjB,iBAAA,CANA,6BACE,0BjB6oB0B,CiB5oB1B,cAAA,CAMF,+BACE,kBAAA,CAIJ,qBACE,WjB6Be,CiB5Bf,qBjBnBkB,CiBoBlB,wBjBnCY,CkB5BhB,WAKE,qBAAA,CACA,oBAAA,CACA,qBAAA,CACA,iBAAA,CACA,alBqBmB,CkBpBnB,4BlBoHgB,CkBnHhB,WAAA,CACA,kBlByEsB,CkBxEtB,gBlB4Hc,CkB3Hd,iBlB4He,CkB3Hf,YAAA,CACA,alBiHiB,CkBhHjB,elBiHmB,CkB/GnB,iBACE,YAAA,CAGF,oBACE,WlBkEe,CkB/DjB,0BACE,cAAA,CAGF,6BACE,wBlByFY,CkBtFd,gCACE,UlBiGmB,CkB7FnB,uDACE,iBAAA,CAKF,qDACE,gBAAA,CAIJ,oBACE,alBtBiB,CkBuBjB,4BlByEc,CkBtEhB,kBACE,alB3BiB,CkB4BjB,4BlBoEc,CkBjEhB,qBACE,alBhCiB,CkBiCjB,4BlB+Dc,CkB5DhB,iBACE,alBrCiB,CkBsCjB,4BlB0Dc,CkBvDhB,iBACE,alB1CiB,CkB2CjB,4BlBqDc,CkBlDhB,sBACE,alB/CiB,CkBgDjB,4BlBgDc,CkB7ChB,sBACE,alBpDiB,CkBqDjB,4BlB2Cc,CkBxChB,iBACE,alBzDiB,CkB0DjB,4BlBsCc,CkBnChB,uBACE,alB9DiB,CkB+DjB,4BlBiCc,CmB7HlB,WACE,qBAAA,CACA,mBAAA,CACA,iBAAA,CACA,aAAA,CACA,WnBwWa,CmBvWb,YnBwWc,CmBvWd,qBnBiCW,CmBhCX,4BnBgWgB,CmB9VhB,qCAEE,qBAAA,CACA,aAAA,CACA,WnB+VW,CmB9VX,YnB+VY,CmB9VZ,mBAAA,CAIF,mBACE,iBAAA,CACA,UAAA,CACA,KAAA,CACA,QAAA,CACA,iBAAA,CACA,oBnBCY,CAAA,kBAAA,CmBCZ,iBnBwUkB,CmBnUpB,kBACE,iBAAA,CACA,UAAA,CACA,KAAA,CACA,QAAA,CACA,2CAAA,CAAA,mCAAA,CACA,0CAAA,CAAA,kCAAA,CACA,iBAAA,CACA,wDAAA,CACA,kBAAA,CACA,iBnByTkB,CmBxTlB,4BAAA,CAGF,oBACE,UAAA,CACA,WAAA,CACA,iBAAA,CAUJ,kCACE,GAAA,wBAAA,CAAA,CADF,0BACE,GAAA,wBAAA,CAAA,CC9DF,YAEE,qBAAA,CrBaA,YAAA,CACA,kBAAA,CqBZA,sBAAA,CACA,kBAAA,CACA,iBAAA,CACA,KAAA,CACA,MAAA,CACA,OAAA,CACA,QAAA,CACA,iCAAA,CAAA,yBAAA,CAGA,qBACE,WAAA,CAIF,oBACE,qBAAA,CACA,UAAA,CACA,sCpB0pBe,CoBzpBf,iBAAA,CACA,KAAA,CACA,MAAA,CACA,OAAA,CACA,QAAA,CACA,WAAA,CAGF,0BACE,iCAAA,CAAA,yBAAA,CAGF,+BACE,sCAAA,CAAA,8BAAA,CCnCJ,gBAIE,qBAAA,CACA,oBAAA,CACA,QrByvBmB,CqBxvBnB,WrByvBoB,CqBxvBpB,qBrBgCW,CqB/BX,qBrBuCY,CqBrCZ,mBACE,qBAAA,CACA,cAAA,CACA,wBAAA,CAAA,qBAAA,CAAA,gBAAA,CAEA,8BAEE,QrBgvBoB,CqB/uBpB,iBrBgvBqB,CqB/uBrB,UAAA,CACA,WAAA,CAIF,wCACE,arBuCW,CqBtCX,wBrBqCW,CqBnCX,yDACE,arBmCS,CqBlCT,wBrBiCS,CqB5Bb,yBACE,oBrBIc,CqBHd,wBrBwBW,CqBrBb,yBACE,qBrBFO,CqBGP,wBrBqBW,CqBlBb,0BACE,qBrBPO,CqBQP,wBrBgBW,CqBVX,kCtByCJ,aAAA,CAME,UAAA,CACA,WAAA,CAGF,qDACE,SAZa,CAab,aAba,CAcb,UAda,CsBhCX,kCtBiCJ,aAAA,CAME,UAAA,CACA,WAAA,CAGF,qDACE,SAZa,CAab,aAba,CAcb,UAda,CsBxBX,kCtByBJ,aAAA,CAME,UAAA,CACA,WAAA,CAGF,qDACE,UAZa,CAab,cAba,CAcb,WAda,CsBfX,kCtBgBJ,aAAA,CAME,UAAA,CACA,WAAA,CAGF,qDACE,UAZa,CAab,cAba,CAcb,WAda,CuB9FjB,IACE,0BAAA,CACA,oBAAA,CACA,uBAAA,CACA,iBAAA,CACA,qBAAA,CAIF,YACE,YAAA,CACA,SAAA,CACA,yDAAA,CACA,iEAAA,CACA,WAAA,CAEA,UAAA,CAEA,iBAAA,CAGF,YACE,YAAA,CACA,SAAA,CACA,yDAAA,CACA,iEAAA,CACA,UAAA,CAEA,OAAA,CAGA,oBAAA,CAGA,iBAAA,CAGF,oDAEE,aAAA,CACA,4BAAA,CAGF,oJAME,UAAA,CAGF,kJAME,qBAAA,CACA,wBtB/BoB,CsBgCpB,UAAA,CAIF,aACE,wBtBpCmB,CsBqCnB,iBAAA,CACA,6DAAA,CACA,qEAAA,CACA,UAAA,CAEA,UAAA,CAEA,iBAAA,CAGF,aACE,wBtBlDc,CsBmDd,iBAAA,CACA,4DAAA,CACA,oEAAA,CACA,SAAA,CAEA,SAAA,CAEA,iBAAA,CAGF,oGAGE,wBtBhEc,CsBiEd,WAAA,CAGF,oGAGE,wBtBvEc,CsBwEd,UAAA,CAIF,oCACE,IACE,wBAAA,CAAA,CAIJ,wEACE,IACE,wBAAA,CAAA,CAIJ,qBACE,iBAAA,CACA,WAAA","file":"styles.min.css","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","@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}","// 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","@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"]}