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