зеркало из https://github.com/mozilla/hubs.git
1 строка
59 KiB
JavaScript
1 строка
59 KiB
JavaScript
"use strict";(globalThis.webpackChunkhubs=globalThis.webpackChunkhubs||[]).push([[3990],{"./src/react-components/input/ToolbarButton.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{hA:()=>ToolbarButton_ToolbarButton,um:()=>presets,V5:()=>types});var react=__webpack_require__("./node_modules/react/index.js"),prop_types=__webpack_require__("./node_modules/prop-types/index.js"),prop_types_default=__webpack_require__.n(prop_types),classnames=__webpack_require__("./node_modules/classnames/index.js"),classnames_default=__webpack_require__.n(classnames),injectStylesIntoStyleTag=__webpack_require__("./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js"),injectStylesIntoStyleTag_default=__webpack_require__.n(injectStylesIntoStyleTag),styleDomAPI=__webpack_require__("./node_modules/style-loader/dist/runtime/styleDomAPI.js"),styleDomAPI_default=__webpack_require__.n(styleDomAPI),insertBySelector=__webpack_require__("./node_modules/style-loader/dist/runtime/insertBySelector.js"),insertBySelector_default=__webpack_require__.n(insertBySelector),setAttributesWithoutAttributes=__webpack_require__("./node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js"),setAttributesWithoutAttributes_default=__webpack_require__.n(setAttributesWithoutAttributes),insertStyleElement=__webpack_require__("./node_modules/style-loader/dist/runtime/insertStyleElement.js"),insertStyleElement_default=__webpack_require__.n(insertStyleElement),styleTagTransform=__webpack_require__("./node_modules/style-loader/dist/runtime/styleTagTransform.js"),styleTagTransform_default=__webpack_require__.n(styleTagTransform),ToolbarButton=__webpack_require__("./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[13].use[1]!./node_modules/sass-loader/dist/cjs.js!./src/react-components/input/ToolbarButton.scss"),options={};options.styleTagTransform=styleTagTransform_default(),options.setAttributes=setAttributesWithoutAttributes_default(),options.insert=insertBySelector_default().bind(null,"head"),options.domAPI=styleDomAPI_default(),options.insertStyleElement=insertStyleElement_default();injectStylesIntoStyleTag_default()(ToolbarButton.Z,options);const input_ToolbarButton=ToolbarButton.Z&&ToolbarButton.Z.locals?ToolbarButton.Z.locals:void 0;var jsx_runtime=__webpack_require__("./node_modules/react/jsx-runtime.js");const _excluded=["preset","className","iconContainerClassName","children","icon","label","title","selected","large","statusColor","type","disabled","onClick"];function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);enumerableOnly&&(symbols=symbols.filter((function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable}))),keys.push.apply(keys,symbols)}return keys}function _objectSpread(target){for(var i=1;i<arguments.length;i++){var source=null!=arguments[i]?arguments[i]:{};i%2?ownKeys(Object(source),!0).forEach((function(key){_defineProperty(target,key,source[key])})):Object.getOwnPropertyDescriptors?Object.defineProperties(target,Object.getOwnPropertyDescriptors(source)):ownKeys(Object(source)).forEach((function(key){Object.defineProperty(target,key,Object.getOwnPropertyDescriptor(source,key))}))}return target}function _defineProperty(obj,key,value){return(key=function _toPropertyKey(arg){var key=function _toPrimitive(input,hint){if("object"!=typeof input||null===input)return input;var prim=input[Symbol.toPrimitive];if(void 0!==prim){var res=prim.call(input,hint||"default");if("object"!=typeof res)return res;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===hint?String:Number)(input)}(arg,"string");return"symbol"==typeof key?key:String(key)}(key))in obj?Object.defineProperty(obj,key,{value,enumerable:!0,configurable:!0,writable:!0}):obj[key]=value,obj}function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],excluded.indexOf(key)>=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],excluded.indexOf(key)>=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}const presets=["basic","transparent","accept","cancel","accent1","accent2","accent3","accent4","accent5"],types=["none","left","middle","right"],ToolbarButton_ToolbarButton=(0,react.forwardRef)(((_ref,ref)=>{let{preset,className,iconContainerClassName,children,icon,label,title,selected,large,statusColor,type,disabled,onClick}=_ref,rest=_objectWithoutProperties(_ref,_excluded);return(0,jsx_runtime.jsxs)("button",_objectSpread(_objectSpread({ref,className:classnames_default()(input_ToolbarButton.toolbarButton,input_ToolbarButton[preset],input_ToolbarButton[type],{[input_ToolbarButton.selected]:selected,[input_ToolbarButton.large]:large},className),disabled,title,onClick},rest),{},{children:[(0,jsx_runtime.jsxs)("div",{className:classnames_default()(input_ToolbarButton.iconContainer,iconContainerClassName),disabled,"aria-hidden":"true",children:[icon,statusColor&&(0,jsx_runtime.jsx)("div",{className:classnames_default()(input_ToolbarButton.statusIndicator,input_ToolbarButton["status-"+statusColor])}),children]}),label&&(0,jsx_runtime.jsx)("label",{disabled,children:label})]}))}));ToolbarButton_ToolbarButton.propTypes={icon:prop_types_default().node,label:prop_types_default().node,selected:prop_types_default().bool,preset:prop_types_default().oneOf(presets),statusColor:prop_types_default().oneOf(["recording","unread","enabled","disabled"]),className:prop_types_default().string,iconContainerClassName:prop_types_default().string,children:prop_types_default().node,type:prop_types_default().oneOf(types),large:prop_types_default().bool,disabled:prop_types_default().bool,title:prop_types_default().node,onClick:prop_types_default().func},ToolbarButton_ToolbarButton.defaultProps={preset:"basic",disabled:!1},ToolbarButton_ToolbarButton.displayName="ToolbarButton",ToolbarButton_ToolbarButton.__docgenInfo={description:"",methods:[],displayName:"ToolbarButton",props:{preset:{defaultValue:{value:'"basic"',computed:!1},description:"",type:{name:"enum",value:[{value:'"basic"',computed:!1},{value:'"transparent"',computed:!1},{value:'"accept"',computed:!1},{value:'"cancel"',computed:!1},{value:'"accent1"',computed:!1},{value:'"accent2"',computed:!1},{value:'"accent3"',computed:!1},{value:'"accent4"',computed:!1},{value:'"accent5"',computed:!1}]},required:!1},disabled:{defaultValue:{value:"false",computed:!1},description:"",type:{name:"bool"},required:!1},icon:{description:"",type:{name:"node"},required:!1},label:{description:"",type:{name:"node"},required:!1},selected:{description:"",type:{name:"bool"},required:!1},statusColor:{description:"",type:{name:"enum",value:[{value:'"recording"',computed:!1},{value:'"unread"',computed:!1},{value:'"enabled"',computed:!1},{value:'"disabled"',computed:!1}]},required:!1},className:{description:"",type:{name:"string"},required:!1},iconContainerClassName:{description:"",type:{name:"string"},required:!1},children:{description:"",type:{name:"node"},required:!1},type:{description:"",type:{name:"enum",value:[{value:'"none"',computed:!1},{value:'"left"',computed:!1},{value:'"middle"',computed:!1},{value:'"right"',computed:!1}]},required:!1},large:{description:"",type:{name:"bool"},required:!1},title:{description:"",type:{name:"node"},required:!1},onClick:{description:"",type:{name:"func"},required:!1}}}},"./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[13].use[1]!./node_modules/sass-loader/dist/cjs.js!./src/react-components/input/ToolbarButton.scss":(module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{Z:()=>__WEBPACK_DEFAULT_EXPORT__});var _node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/css-loader/dist/runtime/sourceMaps.js"),_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default=__webpack_require__.n(_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0__),_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./node_modules/css-loader/dist/runtime/api.js"),___CSS_LOADER_EXPORT___=__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__)()(_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default());___CSS_LOADER_EXPORT___.push([module.id,'.ToolbarButton__toolbar-button__KIJB6{border:none;background-color:rgba(0,0,0,0);display:flex;flex-direction:column;align-items:center;width:48px}.ToolbarButton__toolbar-button__KIJB6 label{cursor:pointer;color:var(--text1-color);margin-top:8px;margin-bottom:3px;white-space:nowrap}.ToolbarButton__toolbar-button__KIJB6 label:disabled,.ToolbarButton__toolbar-button__KIJB6 label[disabled]{cursor:default}.ToolbarButton__toolbar-button__KIJB6:disabled,.ToolbarButton__toolbar-button__KIJB6[disabled]{cursor:default}.ToolbarButton__icon-container__ZEf9E{position:relative;border-radius:9999px;width:48px;height:48px;display:flex;justify-content:center;align-items:center;border:1px solid rgba(0,0,0,0);background-color:rgba(0,0,0,0);transition:background-color .1s ease-in-out,border-color .1s ease-in-out}.ToolbarButton__icon-container__ZEf9E svg{color:var(--toolbar-icon-color)}.ToolbarButton__icon-container__ZEf9E svg *[stroke="#000"]{transition:stroke .1s ease-in-out}.ToolbarButton__icon-container__ZEf9E svg *[fill="#000"]{transition:fill .1s ease-in-out}.ToolbarButton__large__YDjpA .ToolbarButton__icon-container__ZEf9E{width:96px;height:96px}.ToolbarButton__basic__PsM2Y .ToolbarButton__icon-container__ZEf9E,.ToolbarButton__transparent___w9hR .ToolbarButton__icon-container__ZEf9E{border-color:var(--toolbar-basic-border-color);background-color:var(--background1-color)}.ToolbarButton__basic__PsM2Y .ToolbarButton__icon-container__ZEf9E svg,.ToolbarButton__transparent___w9hR .ToolbarButton__icon-container__ZEf9E svg{color:var(--toolbar-basic-icon-color)}.ToolbarButton__basic__PsM2Y .ToolbarButton__icon-container__ZEf9E:disabled,.ToolbarButton__basic__PsM2Y .ToolbarButton__icon-container__ZEf9E[disabled],.ToolbarButton__transparent___w9hR .ToolbarButton__icon-container__ZEf9E:disabled,.ToolbarButton__transparent___w9hR .ToolbarButton__icon-container__ZEf9E[disabled]{border-color:var(--background1-color);background-color:var(--disabled-bg-color)}.ToolbarButton__basic__PsM2Y .ToolbarButton__icon-container__ZEf9E:disabled svg,.ToolbarButton__basic__PsM2Y .ToolbarButton__icon-container__ZEf9E[disabled] svg,.ToolbarButton__transparent___w9hR .ToolbarButton__icon-container__ZEf9E:disabled svg,.ToolbarButton__transparent___w9hR .ToolbarButton__icon-container__ZEf9E[disabled] svg{color:var(--disabled-icon-color)}.ToolbarButton__basic__PsM2Y:hover .ToolbarButton__icon-container__ZEf9E,.ToolbarButton__transparent___w9hR:hover .ToolbarButton__icon-container__ZEf9E{border:1px solid var(--toolbar-basic-border-color);background-color:var(--basic-color-hover)}.ToolbarButton__basic__PsM2Y:hover .ToolbarButton__icon-container__ZEf9E:disabled,.ToolbarButton__basic__PsM2Y:hover .ToolbarButton__icon-container__ZEf9E[disabled],.ToolbarButton__transparent___w9hR:hover .ToolbarButton__icon-container__ZEf9E:disabled,.ToolbarButton__transparent___w9hR:hover .ToolbarButton__icon-container__ZEf9E[disabled]{border-color:rgba(0,0,0,0);background-color:var(--disabled-bg-color)}.ToolbarButton__basic__PsM2Y:hover .ToolbarButton__icon-container__ZEf9E:disabled svg,.ToolbarButton__basic__PsM2Y:hover .ToolbarButton__icon-container__ZEf9E[disabled] svg,.ToolbarButton__transparent___w9hR:hover .ToolbarButton__icon-container__ZEf9E:disabled svg,.ToolbarButton__transparent___w9hR:hover .ToolbarButton__icon-container__ZEf9E[disabled] svg{color:var(--disabled-icon-color)}.ToolbarButton__basic__PsM2Y:active .ToolbarButton__icon-container__ZEf9E,.ToolbarButton__transparent___w9hR:active .ToolbarButton__icon-container__ZEf9E{border-color:var(--basic-color-pressed);background-color:var(--basic-color-pressed)}.ToolbarButton__basic__PsM2Y.ToolbarButton__selected__SxJqz .ToolbarButton__icon-container__ZEf9E,.ToolbarButton__transparent___w9hR.ToolbarButton__selected__SxJqz .ToolbarButton__icon-container__ZEf9E{border-color:rgba(0,0,0,0);background-color:var(--toolbar-icon-selected-bg)}.ToolbarButton__basic__PsM2Y.ToolbarButton__selected__SxJqz svg,.ToolbarButton__transparent___w9hR.ToolbarButton__selected__SxJqz svg{color:var(--toolbar-basic-selected-icon-color)}.ToolbarButton__basic__PsM2Y.ToolbarButton__selected__SxJqz label,.ToolbarButton__transparent___w9hR.ToolbarButton__selected__SxJqz label{color:var(--text4-color)}.ToolbarButton__basic__PsM2Y.ToolbarButton__selected__SxJqz:hover .ToolbarButton__icon-container__ZEf9E,.ToolbarButton__transparent___w9hR.ToolbarButton__selected__SxJqz:hover .ToolbarButton__icon-container__ZEf9E{background-color:var(--toolbar-basic-color-hover)}.ToolbarButton__basic__PsM2Y.ToolbarButton__selected__SxJqz:active .ToolbarButton__icon-container__ZEf9E,.ToolbarButton__transparent___w9hR.ToolbarButton__selected__SxJqz:active .ToolbarButton__icon-container__ZEf9E{background-color:var(--toolbar-basic-color-pressed)}.ToolbarButton__transparent___w9hR .ToolbarButton__icon-container__ZEf9E{border-color:rgba(0,0,0,0)}.ToolbarButton__primary__J7WCr .ToolbarButton__icon-container__ZEf9E{background-color:var(--primary-color)}.ToolbarButton__primary__J7WCr .ToolbarButton__icon-container__ZEf9E:disabled svg,.ToolbarButton__primary__J7WCr .ToolbarButton__icon-container__ZEf9E[disabled] svg{color:var(--disabled-icon-color)}.ToolbarButton__primary__J7WCr:hover .ToolbarButton__icon-container__ZEf9E{background-color:var(--primary-color-hover)}.ToolbarButton__primary__J7WCr:active .ToolbarButton__icon-container__ZEf9E{background-color:var(--primary-color-pressed)}.ToolbarButton__primary__J7WCr.ToolbarButton__selected__SxJqz .ToolbarButton__icon-container__ZEf9E{border-color:var(--primary-color);background-color:var(--toolbar-icon-selected-bg)}.ToolbarButton__primary__J7WCr.ToolbarButton__selected__SxJqz .ToolbarButton__icon-container__ZEf9E svg{color:var(--toolbar-basic-icon-color)}.ToolbarButton__primary__J7WCr.ToolbarButton__selected__SxJqz label{color:var(--primary-color)}.ToolbarButton__primary__J7WCr.ToolbarButton__selected__SxJqz:hover .ToolbarButton__icon-container__ZEf9E{border-color:var(--primary-color-hover);background-color:var(--toolbar-basic-color-hover)}.ToolbarButton__primary__J7WCr.ToolbarButton__selected__SxJqz:hover .ToolbarButton__icon-container__ZEf9E svg{color:var(--primary-color-hover)}.ToolbarButton__primary__J7WCr.ToolbarButton__selected__SxJqz:hover .ToolbarButton__icon-container__ZEf9E:disabled svg,.ToolbarButton__primary__J7WCr.ToolbarButton__selected__SxJqz:hover .ToolbarButton__icon-container__ZEf9E[disabled] svg{color:var(--disabled-icon-color)}.ToolbarButton__primary__J7WCr.ToolbarButton__selected__SxJqz:hover:disabled,.ToolbarButton__primary__J7WCr.ToolbarButton__selected__SxJqz:hover[disabled]{border-color:rgba(0,0,0,0);background-color:var(--disabled-bg-color)}.ToolbarButton__primary__J7WCr.ToolbarButton__selected__SxJqz:hover:disabled svg,.ToolbarButton__primary__J7WCr.ToolbarButton__selected__SxJqz:hover[disabled] svg{color:var(--disabled-icon-color)}.ToolbarButton__primary__J7WCr.ToolbarButton__selected__SxJqz:active .ToolbarButton__icon-container__ZEf9E{border-color:var(--primary-color-pressed)}.ToolbarButton__primary__J7WCr.ToolbarButton__selected__SxJqz:active .ToolbarButton__icon-container__ZEf9E svg{color:var(--primary-color-pressed)}.ToolbarButton__accept__Hfn1R .ToolbarButton__icon-container__ZEf9E{background-color:var(--accept-color);border-color:var(--accept-border-color)}.ToolbarButton__accept__Hfn1R .ToolbarButton__icon-container__ZEf9E:disabled svg,.ToolbarButton__accept__Hfn1R .ToolbarButton__icon-container__ZEf9E[disabled] svg{color:var(--disabled-icon-color)}.ToolbarButton__accept__Hfn1R:hover .ToolbarButton__icon-container__ZEf9E{background-color:var(--accept-color-hover)}.ToolbarButton__accept__Hfn1R:hover .ToolbarButton__icon-container__ZEf9E:disabled svg,.ToolbarButton__accept__Hfn1R:hover .ToolbarButton__icon-container__ZEf9E[disabled] svg{color:var(--disabled-icon-color)}.ToolbarButton__accept__Hfn1R:active .ToolbarButton__icon-container__ZEf9E{background-color:var(--accept-color-pressed)}.ToolbarButton__accept__Hfn1R.ToolbarButton__selected__SxJqz .ToolbarButton__icon-container__ZEf9E{border-color:var(--accept-color);background-color:var(--toolbar-icon-selected-bg)}.ToolbarButton__accept__Hfn1R.ToolbarButton__selected__SxJqz .ToolbarButton__icon-container__ZEf9E svg{color:var(--accept-color)}.ToolbarButton__accept__Hfn1R.ToolbarButton__selected__SxJqz label{color:var(--accept-color)}.ToolbarButton__accept__Hfn1R.ToolbarButton__selected__SxJqz:hover .ToolbarButton__icon-container__ZEf9E{border-color:var(--accept-color-hover)}.ToolbarButton__accept__Hfn1R.ToolbarButton__selected__SxJqz:hover .ToolbarButton__icon-container__ZEf9E svg{color:var(--accept-color-hover)}.ToolbarButton__accept__Hfn1R.ToolbarButton__selected__SxJqz:active .ToolbarButton__icon-container__ZEf9E{border-color:var(--accept-color-pressed)}.ToolbarButton__accept__Hfn1R.ToolbarButton__selected__SxJqz:active .ToolbarButton__icon-container__ZEf9E svg{color:var(--accept-color-pressed)}.ToolbarButton__cancel__qYLZw .ToolbarButton__icon-container__ZEf9E{background-color:var(--cancel-color)}.ToolbarButton__cancel__qYLZw .ToolbarButton__icon-container__ZEf9E:disabled svg,.ToolbarButton__cancel__qYLZw .ToolbarButton__icon-container__ZEf9E[disabled] svg{color:var(--disabled-icon-color)}.ToolbarButton__cancel__qYLZw:hover .ToolbarButton__icon-container__ZEf9E{background-color:var(--cancel-color-hover)}.ToolbarButton__cancel__qYLZw:hover .ToolbarButton__icon-container__ZEf9E:disabled svg,.ToolbarButton__cancel__qYLZw:hover .ToolbarButton__icon-container__ZEf9E[disabled] svg{color:var(--disabled-icon-color)}.ToolbarButton__cancel__qYLZw:active .ToolbarButton__icon-container__ZEf9E{background-color:var(--cancel-color-pressed)}.ToolbarButton__cancel__qYLZw.ToolbarButton__selected__SxJqz .ToolbarButton__icon-container__ZEf9E{border-color:var(--cancel-color);background-color:var(--toolbar-icon-selected-bg)}.ToolbarButton__cancel__qYLZw.ToolbarButton__selected__SxJqz .ToolbarButton__icon-container__ZEf9E svg{color:var(--cancel-color)}.ToolbarButton__cancel__qYLZw.ToolbarButton__selected__SxJqz label{color:var(--cancel-color)}.ToolbarButton__cancel__qYLZw.ToolbarButton__selected__SxJqz:hover .ToolbarButton__icon-container__ZEf9E{border-color:var(--cancel-color-hover)}.ToolbarButton__cancel__qYLZw.ToolbarButton__selected__SxJqz:hover .ToolbarButton__icon-container__ZEf9E svg{color:var(--cancel-color-hover)}.ToolbarButton__cancel__qYLZw.ToolbarButton__selected__SxJqz:active .ToolbarButton__icon-container__ZEf9E{border-color:var(--cancel-color-pressed)}.ToolbarButton__cancel__qYLZw.ToolbarButton__selected__SxJqz:active .ToolbarButton__icon-container__ZEf9E svg{color:var(--cancel-color-pressed)}.ToolbarButton__accent1__dcxpI .ToolbarButton__icon-container__ZEf9E{background-color:var(--accent1-color);border-color:var(--accent1-border-color)}.ToolbarButton__accent1__dcxpI .ToolbarButton__icon-container__ZEf9E:disabled svg,.ToolbarButton__accent1__dcxpI .ToolbarButton__icon-container__ZEf9E[disabled] svg{color:var(--disabled-icon-color)}.ToolbarButton__accent1__dcxpI:hover .ToolbarButton__icon-container__ZEf9E{background-color:var(--accent1-color-hover)}.ToolbarButton__accent1__dcxpI:hover .ToolbarButton__icon-container__ZEf9E:disabled,.ToolbarButton__accent1__dcxpI:hover .ToolbarButton__icon-container__ZEf9E[disabled]{background-color:var(--accent1-color)}.ToolbarButton__accent1__dcxpI:active .ToolbarButton__icon-container__ZEf9E{background-color:var(--accent1-color-pressed)}.ToolbarButton__accent1__dcxpI.ToolbarButton__selected__SxJqz .ToolbarButton__icon-container__ZEf9E{border-color:var(--accent1-color);background-color:var(--toolbar-icon-selected-bg)}.ToolbarButton__accent1__dcxpI.ToolbarButton__selected__SxJqz .ToolbarButton__icon-container__ZEf9E svg{color:var(--accent1-color)}.ToolbarButton__accent1__dcxpI.ToolbarButton__selected__SxJqz label{color:var(--accent1-color)}.ToolbarButton__accent1__dcxpI.ToolbarButton__selected__SxJqz:hover .ToolbarButton__icon-container__ZEf9E{border-color:var(--accent1-color-hover)}.ToolbarButton__accent1__dcxpI.ToolbarButton__selected__SxJqz:hover .ToolbarButton__icon-container__ZEf9E svg{color:var(--accent1-color-hover)}.ToolbarButton__accent1__dcxpI.ToolbarButton__selected__SxJqz:hover:disabled svg,.ToolbarButton__accent1__dcxpI.ToolbarButton__selected__SxJqz:hover[disabled] svg{color:var(--disabled-icon-color)}.ToolbarButton__accent1__dcxpI.ToolbarButton__selected__SxJqz:active .ToolbarButton__icon-container__ZEf9E{border-color:var(--accent1-color-pressed)}.ToolbarButton__accent1__dcxpI.ToolbarButton__selected__SxJqz:active .ToolbarButton__icon-container__ZEf9E svg{color:var(--accent1-color-pressed)}.ToolbarButton__accent2__OuGAI .ToolbarButton__icon-container__ZEf9E{background-color:var(--accent2-color);border-color:var(--accent2-border-color)}.ToolbarButton__accent2__OuGAI .ToolbarButton__icon-container__ZEf9E:disabled svg,.ToolbarButton__accent2__OuGAI .ToolbarButton__icon-container__ZEf9E[disabled] svg{color:var(--disabled-icon-color)}.ToolbarButton__accent2__OuGAI:hover .ToolbarButton__icon-container__ZEf9E{background-color:var(--accent2-color-hover)}.ToolbarButton__accent2__OuGAI:hover .ToolbarButton__icon-container__ZEf9E:disabled svg,.ToolbarButton__accent2__OuGAI:hover .ToolbarButton__icon-container__ZEf9E[disabled] svg{color:var(--disabled-icon-color)}.ToolbarButton__accent2__OuGAI:active .ToolbarButton__icon-container__ZEf9E{background-color:var(--accent2-color-pressed)}.ToolbarButton__accent2__OuGAI.ToolbarButton__selected__SxJqz .ToolbarButton__icon-container__ZEf9E{border-color:var(--accent2-color);background-color:var(--toolbar-icon-selected-bg)}.ToolbarButton__accent2__OuGAI.ToolbarButton__selected__SxJqz .ToolbarButton__icon-container__ZEf9E svg{color:var(--accent2-color)}.ToolbarButton__accent2__OuGAI.ToolbarButton__selected__SxJqz label{color:var(--accent2-color)}.ToolbarButton__accent2__OuGAI.ToolbarButton__selected__SxJqz:hover .ToolbarButton__icon-container__ZEf9E{border-color:var(--accent2-color-hover)}.ToolbarButton__accent2__OuGAI.ToolbarButton__selected__SxJqz:hover .ToolbarButton__icon-container__ZEf9E svg{color:var(--accent2-color-hover)}.ToolbarButton__accent2__OuGAI.ToolbarButton__selected__SxJqz:active .ToolbarButton__icon-container__ZEf9E{border-color:var(--accent2-color-pressed)}.ToolbarButton__accent2__OuGAI.ToolbarButton__selected__SxJqz:active .ToolbarButton__icon-container__ZEf9E svg{color:var(--accent2-color-pressed)}.ToolbarButton__accent3__JwDT5 .ToolbarButton__icon-container__ZEf9E{background-color:var(--accent3-color);border-color:var(--accent3-border-color)}.ToolbarButton__accent3__JwDT5 .ToolbarButton__icon-container__ZEf9E:disabled svg,.ToolbarButton__accent3__JwDT5 .ToolbarButton__icon-container__ZEf9E[disabled] svg{color:var(--disabled-icon-color)}.ToolbarButton__accent3__JwDT5:hover .ToolbarButton__icon-container__ZEf9E{background-color:var(--accent3-color-hover)}.ToolbarButton__accent3__JwDT5:hover .ToolbarButton__icon-container__ZEf9E:disabled svg,.ToolbarButton__accent3__JwDT5:hover .ToolbarButton__icon-container__ZEf9E[disabled] svg{color:var(--disabled-icon-color)}.ToolbarButton__accent3__JwDT5:active .ToolbarButton__icon-container__ZEf9E{background-color:var(--accent3-color-pressed)}.ToolbarButton__accent3__JwDT5.ToolbarButton__selected__SxJqz .ToolbarButton__icon-container__ZEf9E{border-color:var(--accent3-color);background-color:var(--toolbar-icon-selected-bg)}.ToolbarButton__accent3__JwDT5.ToolbarButton__selected__SxJqz .ToolbarButton__icon-container__ZEf9E svg{color:var(--accent3-color)}.ToolbarButton__accent3__JwDT5.ToolbarButton__selected__SxJqz label{color:var(--accent3-color)}.ToolbarButton__accent3__JwDT5.ToolbarButton__selected__SxJqz:hover .ToolbarButton__icon-container__ZEf9E{border-color:var(--accent3-color-hover)}.ToolbarButton__accent3__JwDT5.ToolbarButton__selected__SxJqz:hover .ToolbarButton__icon-container__ZEf9E svg{color:var(--accent3-color-hover)}.ToolbarButton__accent3__JwDT5.ToolbarButton__selected__SxJqz:active .ToolbarButton__icon-container__ZEf9E{border-color:var(--accent3-color-pressed)}.ToolbarButton__accent3__JwDT5.ToolbarButton__selected__SxJqz:active .ToolbarButton__icon-container__ZEf9E svg{color:var(--accent3-color-pressed)}.ToolbarButton__accent4__BXXtS .ToolbarButton__icon-container__ZEf9E{background-color:var(--accent4-color);border-color:var(--accent4-border-color)}.ToolbarButton__accent4__BXXtS .ToolbarButton__icon-container__ZEf9E:disabled svg,.ToolbarButton__accent4__BXXtS .ToolbarButton__icon-container__ZEf9E[disabled] svg{color:var(--disabled-icon-color)}.ToolbarButton__accent4__BXXtS:hover .ToolbarButton__icon-container__ZEf9E{background-color:var(--accent4-color-hover)}.ToolbarButton__accent4__BXXtS:hover .ToolbarButton__icon-container__ZEf9E:disabled svg,.ToolbarButton__accent4__BXXtS:hover .ToolbarButton__icon-container__ZEf9E[disabled] svg{color:var(--disabled-icon-color)}.ToolbarButton__accent4__BXXtS:active .ToolbarButton__icon-container__ZEf9E{background-color:var(--accent4-color-pressed)}.ToolbarButton__accent4__BXXtS.ToolbarButton__selected__SxJqz .ToolbarButton__icon-container__ZEf9E{border-color:var(--accent4-color);background-color:var(--toolbar-icon-selected-bg)}.ToolbarButton__accent4__BXXtS.ToolbarButton__selected__SxJqz .ToolbarButton__icon-container__ZEf9E svg{color:var(--accent4-color)}.ToolbarButton__accent4__BXXtS.ToolbarButton__selected__SxJqz label{color:var(--accent4-color)}.ToolbarButton__accent4__BXXtS.ToolbarButton__selected__SxJqz:hover .ToolbarButton__icon-container__ZEf9E{border-color:var(--accent4-color-hover)}.ToolbarButton__accent4__BXXtS.ToolbarButton__selected__SxJqz:hover .ToolbarButton__icon-container__ZEf9E svg{color:var(--accent4-color-hover)}.ToolbarButton__accent4__BXXtS.ToolbarButton__selected__SxJqz:active .ToolbarButton__icon-container__ZEf9E{border-color:var(--accent4-color-pressed)}.ToolbarButton__accent4__BXXtS.ToolbarButton__selected__SxJqz:active .ToolbarButton__icon-container__ZEf9E svg{color:var(--accent4-color-pressed)}.ToolbarButton__accent5__bvBvH .ToolbarButton__icon-container__ZEf9E{background-color:var(--accent5-color);border-color:var(--accent5-border-color)}.ToolbarButton__accent5__bvBvH .ToolbarButton__icon-container__ZEf9E:disabled svg,.ToolbarButton__accent5__bvBvH .ToolbarButton__icon-container__ZEf9E[disabled] svg{color:var(--disabled-icon-color)}.ToolbarButton__accent5__bvBvH:hover .ToolbarButton__icon-container__ZEf9E{background-color:var(--accent5-color-hover)}.ToolbarButton__accent5__bvBvH:hover .ToolbarButton__icon-container__ZEf9E:disabled svg,.ToolbarButton__accent5__bvBvH:hover .ToolbarButton__icon-container__ZEf9E[disabled] svg{color:var(--disabled-icon-color)}.ToolbarButton__accent5__bvBvH:active .ToolbarButton__icon-container__ZEf9E{background-color:var(--accent5-color-pressed)}.ToolbarButton__accent5__bvBvH.ToolbarButton__selected__SxJqz .ToolbarButton__icon-container__ZEf9E{border-color:var(--accent5-color);background-color:var(--toolbar-icon-selected-bg)}.ToolbarButton__accent5__bvBvH.ToolbarButton__selected__SxJqz .ToolbarButton__icon-container__ZEf9E svg{color:var(--accent5-color)}.ToolbarButton__accent5__bvBvH.ToolbarButton__selected__SxJqz label{color:var(--accent5-color)}.ToolbarButton__accent5__bvBvH.ToolbarButton__selected__SxJqz:hover .ToolbarButton__icon-container__ZEf9E{border-color:var(--accent5-color-hover)}.ToolbarButton__accent5__bvBvH.ToolbarButton__selected__SxJqz:hover .ToolbarButton__icon-container__ZEf9E svg{color:var(--accent5-color-hover)}.ToolbarButton__accent5__bvBvH.ToolbarButton__selected__SxJqz:active .ToolbarButton__icon-container__ZEf9E{border-color:var(--accent5-color-pressed)}.ToolbarButton__accent5__bvBvH.ToolbarButton__selected__SxJqz:active .ToolbarButton__icon-container__ZEf9E svg{color:var(--accent5-color-pressed)}.ToolbarButton__status-indicator__Zgtiz{position:absolute;top:5px;width:5px;height:5px;border-radius:5px}.ToolbarButton__status-enabled__cSFwX{background-color:var(--accept-color)}.ToolbarButton__status-disabled__djo6Z{background-color:var(--cancel-color)}.ToolbarButton__status-unread__HdEKL{background-color:#ff8500}.ToolbarButton__status-recording__JMGuh{background-color:#f5325c}.ToolbarButton__left__xOpwY .ToolbarButton__icon-container__ZEf9E{width:48px;border-radius:0px;border-top-left-radius:9999px;border-bottom-left-radius:9999px}.ToolbarButton__middle__h7pkJ .ToolbarButton__icon-container__ZEf9E{border-radius:0px}.ToolbarButton__right__e8lxT .ToolbarButton__icon-container__ZEf9E{width:48px;border-radius:0px;border-top-right-radius:9999px;border-bottom-right-radius:9999px}',"",{version:3,sources:["webpack://./src/react-components/input/ToolbarButton.scss","webpack://./src/react-components/styles/theme.scss"],names:[],mappings:"AAEA,sCACE,WAAA,CACA,8BAAA,CACA,YAAA,CACA,qBAAA,CACA,kBAAA,CACA,UAAA,CAEA,4CACE,cAAA,CACA,wBCyFU,CDxFV,cAAA,CACA,iBAAA,CACA,kBAAA,CAEA,2GAEE,cAAA,CAIJ,+FAEE,cAAA,CAIJ,sCACE,iBAAA,CACA,oBAAA,CACA,UAAA,CACA,WAAA,CACA,YAAA,CACA,sBAAA,CACA,kBAAA,CACA,8BAAA,CACA,8BCJY,CDMZ,wEAAA,CAEA,0CACE,+BCwLiB,CDtLjB,2DACE,iCAAA,CAGF,yDACE,+BAAA,CAKN,mEACE,UAAA,CACA,WAAA,CAKA,4IACE,8CC2KyB,CD1KzB,yCCsGgB,CDrGhB,oJACE,qCCmKqB,CDhKvB,8TAEE,qCC+Fc,CD9Fd,yCCkHc,CDjHd,8UACE,gCCiHc,CD5GpB,wJACE,kDAAA,CACA,yCCoGgB,CDlGhB,sVAEE,0BCnDQ,CDoDR,yCCoGc,CDnGd,sWACE,gCCmGc,CD9FpB,0JACE,uCCwFkB,CDvFlB,2CCuFkB,CDnFlB,0MACE,0BAAA,CACA,gDC+HqB,CD7HvB,sIACE,8CC8H8B,CD3HhC,0IACE,wBCEQ,CDER,sNACE,iDCuHoB,CDlHtB,wNACE,mDCkHsB,CD5G9B,yEACE,0BC5FY,CDgGZ,qEACE,qCC6BY,CDzBV,qKACE,gCCmDc,CD9CpB,2EACE,2CCmBkB,CDhBpB,4EACE,6CCgBoB,CDZpB,oGACE,iCCSU,CDRV,gDC4EqB,CD1ErB,wGACE,qCC0EmB,CDtEvB,oEACE,0BAAA,CAIA,0GACE,uCCJc,CDKd,iDCkEoB,CDhEpB,8GACE,gCCRY,CDaZ,+OACE,gCCYU,CDPhB,2JAEE,0BCpJM,CDqJN,yCCGY,CDFZ,mKACE,gCCEY,CDIhB,2GACE,yCC9BgB,CDgChB,+GACE,kCCjCc,CDyCtB,oEACE,oCClFW,CDmFX,uCClFkB,CDsFhB,mKACE,gCCvBc,CD4BpB,0EACE,0CC5FiB,CDgGf,+KACE,gCClCc,CDuCpB,2EACE,4CCtGmB,CD0GnB,mGACE,gCC9GS,CD+GT,gDCLqB,CDOrB,uGACE,yBClHO,CDsHX,mEACE,yBCvHS,CD2HT,yGACE,sCC1Ha,CD4Hb,6GACE,+BC7HW,CDmIf,0GACE,wCCnIe,CDqIf,8GACE,iCCtIa,CD8IrB,oEACE,oCC7IW,CDiJT,mKACE,gCCtFc,CD2FpB,0EACE,0CCvJiB,CD2Jf,+KACE,gCCjGc,CDsGpB,2EACE,4CCjKmB,CDqKnB,mGACE,gCCxKS,CDyKT,gDCpEqB,CDsErB,uGACE,yBC5KO,CDgLX,mEACE,yBCjLS,CDqLT,yGACE,sCCrLa,CDuLb,6GACE,+BCxLW,CD8Lf,0GACE,wCC9Le,CDgMf,8GACE,iCCjMa,CDyMrB,qEACE,qCCxMY,CDyMZ,wCCxMmB,CD4MjB,qKACE,gCCtJc,CD2JpB,2EACE,2CClNkB,CDoNlB,yKAEE,qCCxNU,CD4Nd,4EACE,6CC1NoB,CD8NpB,oGACE,iCClOU,CDmOV,gDClIqB,CDoIrB,wGACE,0BCtOQ,CD0OZ,oEACE,0BC3OU,CD+OV,0GACE,uCC9Oc,CDgPd,8GACE,gCCjPY,CDuPd,mKACE,gCClMY,CDwMhB,2GACE,yCC9PgB,CDgQhB,+GACE,kCCjQc,CDyQtB,qEACE,qCCxQY,CDyQZ,wCCxQmB,CD4QjB,qKACE,gCC3Nc,CDgOpB,2EACE,2CClRkB,CDsRhB,iLACE,gCCtOc,CD2OpB,4EACE,6CC5RoB,CDgSpB,oGACE,iCCpSU,CDqSV,gDCzMqB,CD2MrB,wGACE,0BCxSQ,CD4SZ,oEACE,0BC7SU,CDiTV,0GACE,uCChTc,CDkTd,8GACE,gCCnTY,CDyThB,2GACE,yCCzTgB,CD2ThB,+GACE,kCC5Tc,CDoUtB,qEACE,qCCnUY,CDoUZ,wCCjUmB,CDqUjB,qKACE,gCC3Rc,CDgSpB,2EACE,2CC9UkB,CDkVhB,iLACE,gCCtSc,CD2SpB,4EACE,6CCxVoB,CD4VpB,oGACE,iCC/VU,CDgWV,gDCzQqB,CD2QrB,wGACE,0BCnWQ,CDuWZ,oEACE,0BCxWU,CD4WV,0GACE,uCC5Wc,CD8Wd,8GACE,gCC/WY,CDqXhB,2GACE,yCCrXgB,CDuXhB,+GACE,kCCxXc,CDgYtB,qEACE,qCC9XY,CD+XZ,wCC9XmB,CDkYjB,qKACE,gCC3Vc,CDgWpB,2EACE,2CCxYkB,CD4YhB,iLACE,gCCtWc,CD2WpB,4EACE,6CClZoB,CDsZpB,oGACE,iCC1ZU,CD2ZV,gDCzUqB,CD2UrB,wGACE,0BC9ZQ,CDkaZ,oEACE,0BCnaU,CDuaV,0GACE,uCCtac,CDwad,8GACE,gCCzaY,CD+ahB,2GACE,yCC/agB,CDibhB,+GACE,kCClbc,CD0btB,qEACE,qCCzbY,CD0bZ,wCCzbmB,CD6bjB,qKACE,gCC3Zc,CDgapB,2EACE,2CCnckB,CDuchB,iLACE,gCCtac,CD2apB,4EACE,6CC7coB,CDidpB,oGACE,iCCrdU,CDsdV,gDCzYqB,CD2YrB,wGACE,0BCzdQ,CD6dZ,oEACE,0BC9dU,CDkeV,0GACE,uCCjec,CDmed,8GACE,gCCpeY,CD0ehB,2GACE,yCC1egB,CD2ehB,+GACE,kCC5ec,CDmfxB,wCACE,iBAAA,CACA,OAAA,CACA,SAAA,CACA,UAAA,CACA,iBAAA,CAGF,sCACE,oCC5hBa,CD+hBf,uCACE,oCC3hBa,CD8hBf,qCACE,wBChmBO,CDmmBT,wCACE,wBCxmBI,CD4mBJ,kEACE,UAAA,CACA,iBAAA,CACA,6BAAA,CACA,gCAAA,CAKF,oEACE,iBAAA,CAKF,mEACE,UAAA,CACA,iBAAA,CACA,8BAAA,CACA,iCAAA",sourcesContent:['@use "../styles/theme";\n\n:local(.toolbar-button) {\n border: none;\n background-color: transparent;\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 48px;\n\n label {\n cursor: pointer;\n color: theme.$text1-color;\n margin-top: 8px;\n margin-bottom: 3px;\n white-space: nowrap;\n\n &:disabled,\n &[disabled] {\n cursor: default;\n }\n }\n\n &:disabled,\n &[disabled] {\n cursor: default;\n }\n}\n\n:local(.icon-container) {\n position: relative;\n border-radius: 9999px;\n width: 48px;\n height: 48px;\n display: flex;\n justify-content: center;\n align-items: center;\n border: 1px solid theme.$transparent;\n background-color: theme.$transparent;\n\n transition: background-color 0.1s ease-in-out, border-color 0.1s ease-in-out;\n\n svg {\n color: theme.$toolbar-icon-color;\n\n *[stroke="\\#000"] {\n transition: stroke 0.1s ease-in-out;\n }\n\n *[fill="\\#000"] {\n transition: fill 0.1s ease-in-out;\n }\n }\n}\n\n:local(.large) :local(.icon-container) {\n width: 96px;\n height: 96px;\n}\n\n:local(.basic),\n:local(.transparent) {\n :local(.icon-container) {\n border-color: theme.$toolbar-basic-border-color;\n background-color: theme.$background1-color;\n svg {\n color: theme.$toolbar-basic-icon-color;\n }\n\n &:disabled,\n &[disabled] {\n border-color: theme.$background1-color;\n background-color: theme.$disabled-bg-color;\n svg {\n color: theme.$disabled-icon-color;\n }\n }\n }\n\n &:hover :local(.icon-container) {\n border: 1px solid theme.$toolbar-basic-border-color;\n background-color: theme.$basic-color-hover;\n\n &:disabled,\n &[disabled] {\n border-color: theme.$transparent;\n background-color: theme.$disabled-bg-color;\n svg {\n color: theme.$disabled-icon-color;\n }\n }\n }\n\n &:active :local(.icon-container) {\n border-color: theme.$basic-color-pressed;\n background-color: theme.$basic-color-pressed;\n }\n\n &:local(.selected) {\n :local(.icon-container) {\n border-color: transparent;\n background-color: theme.$toolbar-icon-selected-bg;\n }\n svg {\n color: theme.$toolbar-basic-selected-icon-color;\n }\n\n label {\n color: theme.$text4-color;\n }\n\n &:hover {\n :local(.icon-container) {\n background-color: theme.$toolbar-basic-color-hover;\n }\n }\n\n &:active {\n :local(.icon-container) {\n background-color: theme.$toolbar-basic-color-pressed;\n }\n }\n }\n}\n\n:local(.transparent) :local(.icon-container) {\n border-color: theme.$transparent;\n}\n\n:local(.primary) {\n :local(.icon-container) {\n background-color: theme.$primary-color;\n\n &:disabled,\n &[disabled] {\n svg {\n color: theme.$disabled-icon-color;\n }\n }\n }\n\n &:hover :local(.icon-container) {\n background-color: theme.$primary-color-hover;\n }\n\n &:active :local(.icon-container) {\n background-color: theme.$primary-color-pressed;\n }\n\n &:local(.selected) {\n :local(.icon-container) {\n border-color: theme.$primary-color;\n background-color: theme.$toolbar-icon-selected-bg;\n\n svg {\n color: theme.$toolbar-basic-icon-color;\n }\n }\n\n label {\n color: theme.$primary-color;\n }\n\n &:hover {\n :local(.icon-container) {\n border-color: theme.$primary-color-hover;\n background-color: theme.$toolbar-basic-color-hover;\n\n svg {\n color: theme.$primary-color-hover;\n }\n\n &:disabled,\n &[disabled] {\n svg {\n color: theme.$disabled-icon-color;\n }\n }\n }\n\n &:disabled,\n &[disabled] {\n border-color: theme.$transparent;\n background-color: theme.$disabled-bg-color;\n svg {\n color: theme.$disabled-icon-color;\n }\n }\n }\n\n &:active {\n :local(.icon-container) {\n border-color: theme.$primary-color-pressed;\n\n svg {\n color: theme.$primary-color-pressed;\n }\n }\n }\n }\n}\n\n:local(.accept) {\n :local(.icon-container) {\n background-color: theme.$accept-color;\n border-color: theme.$accept-border-color;\n\n &:disabled,\n &[disabled] {\n svg {\n color: theme.$disabled-icon-color;\n }\n }\n }\n\n &:hover :local(.icon-container) {\n background-color: theme.$accept-color-hover;\n\n &:disabled,\n &[disabled] {\n svg {\n color: theme.$disabled-icon-color;\n }\n }\n }\n\n &:active :local(.icon-container) {\n background-color: theme.$accept-color-pressed;\n }\n\n &:local(.selected) {\n :local(.icon-container) {\n border-color: theme.$accept-color;\n background-color: theme.$toolbar-icon-selected-bg;\n\n svg {\n color: theme.$accept-color;\n }\n }\n\n label {\n color: theme.$accept-color;\n }\n\n &:hover {\n :local(.icon-container) {\n border-color: theme.$accept-color-hover;\n\n svg {\n color: theme.$accept-color-hover;\n }\n }\n }\n\n &:active {\n :local(.icon-container) {\n border-color: theme.$accept-color-pressed;\n\n svg {\n color: theme.$accept-color-pressed;\n }\n }\n }\n }\n}\n\n:local(.cancel) {\n :local(.icon-container) {\n background-color: theme.$cancel-color;\n\n &:disabled,\n &[disabled] {\n svg {\n color: theme.$disabled-icon-color;\n }\n }\n }\n\n &:hover :local(.icon-container) {\n background-color: theme.$cancel-color-hover;\n\n &:disabled,\n &[disabled] {\n svg {\n color: theme.$disabled-icon-color;\n }\n }\n }\n\n &:active :local(.icon-container) {\n background-color: theme.$cancel-color-pressed;\n }\n\n &:local(.selected) {\n :local(.icon-container) {\n border-color: theme.$cancel-color;\n background-color: theme.$toolbar-icon-selected-bg;\n\n svg {\n color: theme.$cancel-color;\n }\n }\n\n label {\n color: theme.$cancel-color;\n }\n\n &:hover {\n :local(.icon-container) {\n border-color: theme.$cancel-color-hover;\n\n svg {\n color: theme.$cancel-color-hover;\n }\n }\n }\n\n &:active {\n :local(.icon-container) {\n border-color: theme.$cancel-color-pressed;\n\n svg {\n color: theme.$cancel-color-pressed;\n }\n }\n }\n }\n}\n\n:local(.accent1) {\n :local(.icon-container) {\n background-color: theme.$accent1-color;\n border-color: theme.$accent1-border-color;\n\n &:disabled,\n &[disabled] {\n svg {\n color: theme.$disabled-icon-color;\n }\n }\n }\n\n &:hover :local(.icon-container) {\n background-color: theme.$accent1-color-hover;\n\n &:disabled,\n &[disabled] {\n background-color: theme.$accent1-color;\n }\n }\n\n &:active :local(.icon-container) {\n background-color: theme.$accent1-color-pressed;\n }\n\n &:local(.selected) {\n :local(.icon-container) {\n border-color: theme.$accent1-color;\n background-color: theme.$toolbar-icon-selected-bg;\n\n svg {\n color: theme.$accent1-color;\n }\n }\n\n label {\n color: theme.$accent1-color;\n }\n\n &:hover {\n :local(.icon-container) {\n border-color: theme.$accent1-color-hover;\n\n svg {\n color: theme.$accent1-color-hover;\n }\n }\n\n &:disabled,\n &[disabled] {\n svg {\n color: theme.$disabled-icon-color;\n }\n }\n }\n\n &:active {\n :local(.icon-container) {\n border-color: theme.$accent1-color-pressed;\n\n svg {\n color: theme.$accent1-color-pressed;\n }\n }\n }\n }\n}\n\n:local(.accent2) {\n :local(.icon-container) {\n background-color: theme.$accent2-color;\n border-color: theme.$accent2-border-color;\n\n &:disabled,\n &[disabled] {\n svg {\n color: theme.$disabled-icon-color;\n }\n }\n }\n\n &:hover :local(.icon-container) {\n background-color: theme.$accent2-color-hover;\n\n &:disabled,\n &[disabled] {\n svg {\n color: theme.$disabled-icon-color;\n }\n }\n }\n\n &:active :local(.icon-container) {\n background-color: theme.$accent2-color-pressed;\n }\n\n &:local(.selected) {\n :local(.icon-container) {\n border-color: theme.$accent2-color;\n background-color: theme.$toolbar-icon-selected-bg;\n\n svg {\n color: theme.$accent2-color;\n }\n }\n\n label {\n color: theme.$accent2-color;\n }\n\n &:hover {\n :local(.icon-container) {\n border-color: theme.$accent2-color-hover;\n\n svg {\n color: theme.$accent2-color-hover;\n }\n }\n }\n\n &:active {\n :local(.icon-container) {\n border-color: theme.$accent2-color-pressed;\n\n svg {\n color: theme.$accent2-color-pressed;\n }\n }\n }\n }\n}\n\n:local(.accent3) {\n :local(.icon-container) {\n background-color: theme.$accent3-color;\n border-color: theme.$accent3-border-color;\n\n &:disabled,\n &[disabled] {\n svg {\n color: theme.$disabled-icon-color;\n }\n }\n }\n\n &:hover :local(.icon-container) {\n background-color: theme.$accent3-color-hover;\n\n &:disabled,\n &[disabled] {\n svg {\n color: theme.$disabled-icon-color;\n }\n }\n }\n\n &:active :local(.icon-container) {\n background-color: theme.$accent3-color-pressed;\n }\n\n &:local(.selected) {\n :local(.icon-container) {\n border-color: theme.$accent3-color;\n background-color: theme.$toolbar-icon-selected-bg;\n\n svg {\n color: theme.$accent3-color;\n }\n }\n\n label {\n color: theme.$accent3-color;\n }\n\n &:hover {\n :local(.icon-container) {\n border-color: theme.$accent3-color-hover;\n\n svg {\n color: theme.$accent3-color-hover;\n }\n }\n }\n\n &:active {\n :local(.icon-container) {\n border-color: theme.$accent3-color-pressed;\n\n svg {\n color: theme.$accent3-color-pressed;\n }\n }\n }\n }\n}\n\n:local(.accent4) {\n :local(.icon-container) {\n background-color: theme.$accent4-color;\n border-color: theme.$accent4-border-color;\n\n &:disabled,\n &[disabled] {\n svg {\n color: theme.$disabled-icon-color;\n }\n }\n }\n\n &:hover :local(.icon-container) {\n background-color: theme.$accent4-color-hover;\n\n &:disabled,\n &[disabled] {\n svg {\n color: theme.$disabled-icon-color;\n }\n }\n }\n\n &:active :local(.icon-container) {\n background-color: theme.$accent4-color-pressed;\n }\n\n &:local(.selected) {\n :local(.icon-container) {\n border-color: theme.$accent4-color;\n background-color: theme.$toolbar-icon-selected-bg;\n\n svg {\n color: theme.$accent4-color;\n }\n }\n\n label {\n color: theme.$accent4-color;\n }\n\n &:hover {\n :local(.icon-container) {\n border-color: theme.$accent4-color-hover;\n\n svg {\n color: theme.$accent4-color-hover;\n }\n }\n }\n\n &:active {\n :local(.icon-container) {\n border-color: theme.$accent4-color-pressed;\n\n svg {\n color: theme.$accent4-color-pressed;\n }\n }\n }\n }\n}\n\n:local(.accent5) {\n :local(.icon-container) {\n background-color: theme.$accent5-color;\n border-color: theme.$accent5-border-color;\n\n &:disabled,\n &[disabled] {\n svg {\n color: theme.$disabled-icon-color;\n }\n }\n }\n\n &:hover :local(.icon-container) {\n background-color: theme.$accent5-color-hover;\n\n &:disabled,\n &[disabled] {\n svg {\n color: theme.$disabled-icon-color;\n }\n }\n }\n\n &:active :local(.icon-container) {\n background-color: theme.$accent5-color-pressed;\n }\n\n &:local(.selected) {\n :local(.icon-container) {\n border-color: theme.$accent5-color;\n background-color: theme.$toolbar-icon-selected-bg;\n\n svg {\n color: theme.$accent5-color;\n }\n }\n\n label {\n color: theme.$accent5-color;\n }\n\n &:hover {\n :local(.icon-container) {\n border-color: theme.$accent5-color-hover;\n\n svg {\n color: theme.$accent5-color-hover;\n }\n }\n }\n\n &:active {\n :local(.icon-container) {\n border-color: theme.$accent5-color-pressed;\n svg {\n color: theme.$accent5-color-pressed;\n }\n }\n }\n }\n}\n\n:local(.status-indicator) {\n position: absolute;\n top: 5px;\n width: 5px;\n height: 5px;\n border-radius: 5px;\n}\n\n:local(.status-enabled) {\n background-color: theme.$accept-color;\n}\n\n:local(.status-disabled) {\n background-color: theme.$cancel-color;\n}\n\n:local(.status-unread) {\n background-color: theme.$orange;\n}\n\n:local(.status-recording) {\n background-color: theme.$red;\n}\n\n:local(.left) {\n :local(.icon-container) {\n width: 48px;\n border-radius: 0px;\n border-top-left-radius: 9999px;\n border-bottom-left-radius: 9999px;\n }\n}\n\n:local(.middle) {\n :local(.icon-container) {\n border-radius: 0px;\n }\n}\n\n:local(.right) {\n :local(.icon-container) {\n width: 48px;\n border-radius: 0px;\n border-top-right-radius: 9999px;\n border-bottom-right-radius: 9999px;\n }\n}\n',"// Breakpoints\n// default below 576px (Portrait Phones)\n$breakpoint-sm: 576px; // Landscape Phones\n$breakpoint-md: 768px; // Tablets\n$breakpoint-lg: 992px; // Desktops\n$breakpoint-xl: 1200px; // Large Desktops\n$breakpoint-xxl: 1600px; // Extra Large Desktops\n$breakpoint-vr: 600px; // Standalone VR Browsers\n\n// Font styles\n$font-size-xs: 10px;\n$font-size-sm: 12px;\n$font-size-md: 14px;\n$font-size-lg: 20px;\n$font-size-xl: 24px;\n$font-size-2xl: 28px;\n\n$font-weight-regular: 400;\n$font-weight-medium: 500;\n$font-weight-bold: 700;\n\n// Border styles\n$border-radius-regular: 8px;\n$border-radius-small: 6px;\n\n// Spacing\n$spacing-2xs: 4px;\n$spacing-xs: 8px;\n$spacing-sm: 12px;\n$spacing-md: 16px;\n$spacing-lg: 20px;\n$spacing-xl: 24px;\n\n// Utility colors\n$transparent: transparent;\n$transparent-hover: rgba(0, 0, 0, 0.08);\n$transparent-pressed: rgba(0, 0, 0, 0.12);\n\n$white: #ffffff;\n$white-hover: #e7e7e7;\n$white-pressed: #dbdbdb;\n\n$lightgrey: #e7e7e7;\n$lightgrey-hover: #f5f5f5;\n$lightgrey-pressed: #dbdbdb;\n\n$grey: #bbbbbb;\n$grey-hover: #c7c7c7;\n$grey-pressed: #adadad;\n\n$darkgrey: #868686;\n$darkgrey-hover: #949494;\n$darkgrey-pressed: #7a7a7a;\n\n$black: #000000;\n$black-hover: #404040;\n$black-pressed: #7a7a7a;\n\n$red: #f5325c;\n$red-hover: #f64b70;\n$red-pressed: #f41a49;\n\n$orange: #ff8500;\n$orange-hover: #ff911a;\n$orange-pressed: #e67800;\n\n$green: #7ed320;\n$green-hover: #8cdf2f;\n$green-pressed: #72be1d;\n\n$blue: #007ab8;\n$blue-hover: #008bd1;\n$blue-pressed: #00699e;\n\n$purple: #7854f6;\n$purple-hover: #8c6ef7;\n$purple-pressed: #663df5;\n\n$recessed-bg: #f9f9f9;\n\n$yellow: #ffc000;\n\n// Brand Colors\n$spoke-primary-color: #2f80ed;\n$twitter-primary-color: #6fc0fd;\n$slack-primary-color: #611f69;\n$discord--primary-color: #7289da;\n\n// Discord Bot Page Colors\n$discord-bg-color: #2a2d32;\n$discord-text1-color: white;\n$discord-text2-color: #a3a3a3;\n$discord-text3-color: rgb(127, 127, 127);\n$discord-text4-color: rgb(64, 64, 64);\n\n// Theme SCSS Variables:\n// Reference these variables in the Hubs codebase.\n// The CSS variables they reference are defined in ./global.scss such that they are only included on the page once.\n$font-family-default: var(--font-family-default);\n$font-family-monospace: var(--font-family-monospace);\n\n$text1-color: var(--text1-color);\n$text1-color-hover: var(--text1-color-hover);\n$text1-color-pressed: var(--text1-color-pressed);\n$text2-color: var(--text2-color);\n$text2-color-hover: var(--text2-color-hover);\n$text2-color-pressed: var(--text2-color-pressed);\n$text3-color: var(--text3-color);\n$text3-color-hover: var(--text3-color-hover);\n$text3-color-pressed: var(--text3-color-pressed);\n$text4-color: var(--text4-color);\n$text4-color-hover: var(--text4-color-hover);\n$text4-color-pressed: var(--text4-color-pressed);\n$text5-color: var(--text5-color);\n$text5-color-hover: var(--text5-color-hover);\n$text5-color-pressed: var(--text5-color-pressed);\n$text-inverted-color: var(--text-inverted-color);\n\n$link-color: var(--link-color);\n$link-color-hover: var(--link-color-hover);\n$link-color-pressed: var(--link-color-pressed);\n\n$accept-color: var(--accept-color);\n$accept-border-color: var(--accept-border-color);\n$accept-color-hover: var(--accept-color-hover);\n$accept-color-pressed: var(--accept-color-pressed);\n\n$cancel-color: var(--cancel-color);\n$cancel-color-hover: var(--cancel-color-hover);\n$cancel-color-pressed: var(--cancel-color-pressed);\n\n$accent1-color: var(--accent1-color);\n$accent1-border-color: var(--accent1-border-color);\n$accent1-color-hover: var(--accent1-color-hover);\n$accent1-color-pressed: var(--accent1-color-pressed);\n\n$accent2-color: var(--accent2-color);\n$accent2-border-color: var(--accent2-border-color);\n$accent2-color-hover: var(--accent2-color-hover);\n$accent2-color-pressed: var(--accent2-color-pressed);\n\n$accent3-color: var(--accent3-color);\n$accent3-color-hover: var(--accent3-color-hover);\n$accent3-color-pressed: var(--accent3-color-pressed);\n$accent3-border-color: var(--accent3-border-color);\n\n$accent4-color: var(--accent4-color);\n$accent4-border-color: var(--accent4-border-color);\n$accent4-color-hover: var(--accent4-color-hover);\n$accent4-color-pressed: var(--accent4-color-pressed);\n\n$accent5-color: var(--accent5-color);\n$accent5-border-color: var(--accent5-border-color);\n$accent5-color-hover: var(--accent5-color-hover);\n$accent5-color-pressed: var(--accent5-color-pressed);\n\n$accent6-color: var(--accent6-color);\n$accent6-color-hover: var(--accent6-color-hover);\n$accent6-color-pressed: var(--accent6-color-pressed);\n\n$primary-color: var(--primary-color);\n$primary-color-hover: var(--primary-color-hover);\n$primary-color-pressed: var(--primary-color-pressed);\n\n$secondary-color: var(--secondary-color);\n\n$background1-color: var(--background1-color);\n$background2-color: var(--background2-color);\n$background3-color: var(--background3-color);\n$background4-color: var(--background4-color);\n\n$loading-screen-background: var(--loading-screen-background);\n\n$border1-color: var(--border1-color);\n$border2-color: var(--border2-color);\n\n$outline-color: var(--outline-color);\n\n$shadow-color: var(--shadow-color);\n\n$basic-color: var(--basic-color);\n$basic-color-hover: var(--basic-color-hover);\n$basic-color-pressed: var(--basic-color-pressed);\n$basic-border-color: var(--basic-border-color);\n\n$disabled-text-color: var(--disabled-text-color);\n$disabled-bg-color: var(--disabled-bg-color);\n$disabled-icon-color: var(--disabled-icon-color);\n\n$radio-border-color: var(--radio-border-color);\n$radio-bg-color: var(--radio-bg-color);\n$radio-bg-color-hover: var(--radio-bg-color-hover);\n$radio-bg-color-pressed: var(--radio-bg-color-pressed);\n\n$toggle-button-color: var(--toggle-button-color);\n\n$input-bg-color: var(--input-bg-color);\n$input-icon-color: var(--input-icon-color);\n$input-border-color: var(--input-border-color);\n$input-border-color-hover: var(--input-border-color-hover);\n$input-outline-color: var(--input-outline-color);\n\n$button-text-color: var(--button-text-color);\n$button-border-color: var(--button-border-color);\n$button-bg-color: var(--button-bg-color);\n$button-bg-color-hover: var(--button-bg-color-hover);\n$button-bg-color-pressed: var(--button-bg-color-pressed);\n\n$active-text-color: var(--active-text-color);\n$active-color: var(--active-color);\n$active-color-hover: var(--active-color-hover);\n$active-color-pressed: var(--active-color-pressed);\n\n$chat-bubble-bg-color-sent: var(--chat-bubble-bg-color-sent);\n$chat-bubble-text-color-sent: var(--chat-bubble-text-color-sent);\n$chat-bubble-link-color-sent-hover: var(--chat-bubble-link-color-sent-hover);\n$chat-bubble-link-color-sent-pressed: var(--chat-bubble-link-color-sent-pressed);\n$chat-bubble-bg-color-received: var(--chat-bubble-bg-color-received);\n\n$favorite-color: var(--favorite-color);\n\n$error-color: var(--error-color);\n\n$overlay-bg-color: var(--overlay-bg-color);\n$overlay-text-color: var(--overlay-text-color);\n$overlay-border-color: var(--overlay-border-color);\n\n$toolbar-icon-color: var(--toolbar-icon-color);\n$toolbar-icon-selected-bg: var(--toolbar-icon-selected-bg);\n$toolbar-basic-icon-color: var(--toolbar-basic-icon-color);\n$toolbar-basic-selected-icon-color: var(--toolbar-basic-selected-icon-color);\n$toolbar-basic-color: var(--toolbar-basic-color);\n$toolbar-basic-color-hover: var(--toolbar-basic-color-hover);\n$toolbar-basic-color-pressed: var(--toolbar-basic-color-pressed);\n$toolbar-basic-border-color: var(--toolbar-basic-border-color);\n\n$tile-text-color: var(--tile-text-color);\n$tile-bg-color: var(--tile-bg-color);\n$tile-bg-color-hover: var(--tile-bg-color-hover);\n$tile-bg-color-pressed: var(--tile-bg-color-pressed);\n$tile-button-text-color: var(--tile-button-text-color);\n$tile-button-bg-color: var(--tile-button-bg-color);\n$tile-button-bg-color-hover: var(--tile-button-bg-color-hover);\n$tile-button-bg-color-pressed: var(--tile-button-bg-color-pressed);\n$tile-button-border-color: var(--tile-button-border-color);\n\n// Mozilla Lilypad compatible variables\n\n/**\n PRIMARY INTERACTION\n **/\n$color-interaction-primary: var(--color-interaction-primary);\n$color-interaction-primary-hover: var(--color-interaction-primary-hover);\n$color-interaction-primary-active: var(--color-interaction-primary-active);\n$color-interaction-primary-disabled: var(--color-interaction-primary-disabled);\n$color-interaction-primary-alt: var(--color-interaction-primary-alt);\n$color-interaction-primary-alt-hover: var(--color-interaction-primary-alt-hover);\n$color-interaction-primary-alt-active: var(--color-interaction-primary-alt-active);\n$color-interaction-primary-alt-disabled: var(--color-interaction-primary-alt-disabled);\n\n/**\n SECONDARY INTERACTION\n **/\n$color-interaction-secondary: var(--color-interaction-secondary);\n$color-interaction-secondary-hover: var(--color-interaction-secondary-hover);\n$color-interaction-secondary-active: var(--color-interaction-secondary-active);\n$color-interaction-secondary-disabled: var(--color-interaction-secondary-disabled);\n$color-interaction-secondary-alt: var(--color-interaction-secondary-alt);\n$color-interaction-secondary-alt-hover: var(--color-interaction-secondary-alt-hover);\n$color-interaction-secondary-alt-active: var(--color-interaction-secondary-alt-active);\n$color-interaction-secondary-alt-disabled: var(--color-interaction-secondary-alt-disabled);\n\n/**\n SEMANTIC\n **/\n$color-semantic-info: var(--color-semantic-info);\n$color-semantic-info-hover: var(--color-semantic-info-hover);\n$color-semantic-info-active: var(--color-semantic-info-active);\n$color-semantic-disabled: var(--color-semantic-disabled);\n$color-semantic-success: var(--color-semantic-success);\n$color-semantic-success-hover: var(--color-semantic-success-hover);\n$color-semantic--success-active: var(--color-semantic-success-active);\n$color-semantic-success-disabled: var(--color-semantic-success-disabled);\n$color-semantic-warning: var(--color-semantic-warning);\n$color-semantic-warning-hover: var(--color-semantic-warning-hover);\n$color-semantic-warning-active: var(--color-semantic-warning-active);\n$color-semantic-warning-disabled: var(--color-semantic-warning-disabled);\n$color-semantic-critical: var(--color-semantic-critical);\n$color-semantic-critical-hover: var(--color-semantic-critical-hover);\n$color-semantic-critical-active: var(--color-semantic-critical-active);\n$color-semantic-critical-disabled: var(--color-semantic-critical-disabled);\n$color-semantic-critical-bg-alt: var(--color-semantic-critical-bg-alt);\n$color-semantic-neutral: var(--color-semantic-neutral);\n$color-semantic-neutral-hover: var(--color-semantic-neutral-hover);\n$color-semantic-neutral-active: var(--color-semantic-neutral-active);\n$color-semantic-neutral-inactive: var(--color-semantic-neutral-inactive);\n\n/**\n TEXT\n **/\n$color-text-main: var(--color-text-main);\n$color-text-subtle: var(--color-text-subtle);\n$color-text-reverse: var(--color-text-reverse);\n$color-text-reverse-subtle: var(--color-text-reverse-subtle);\n$color-text-disabled: var(--color-text-disabled);\n$color-text-info: var(--color-text-info);\n$color-text-success: var(--color-text-success);\n$color-text-warning: var(--color-text-warning);\n$color-text-critical: var(--color-text-critical);\n\n/**\n BORDER\n **/\n$color-border-1: var(--color-border-1);\n$color-border-2: var(--color-border-2);\n$color-border-3: var(--color-border-3);\n\n/**\n NEUTRALS\n **/\n$color-neutral-0: var(--color-neutral-0);\n$color-neutral-0-reverse: var(--color-neutral-0-reverse);\n$color-neutral-1: var(--color-neutral-1);\n$color-neutral-2: var(--color-neutral-2);\n$color-neutral-3: var(--color-neutral-3);\n\n/**\n STATUS\n **/\n$color-status-ready: var(--color-status-ready);\n$color-status-offline: var(--color-status-offline);\n$color-status-busy: var(--color-status-busy);\n\n/**\n BACKGROUNDS\n **/\n$color-background-overlay: var(--color-background-overlay);\n$color-background-callout: var(--color-background-subtle-callout);\n$color-background-modal-overlay: var(--color-background-modal-overlay);\n$color-background-critical: var(--color-background-critical);\n$color-background-neutral-0: var(--color-background-neutral-0);\n\n/**\n MENU\n **/\n$color-interactions-menu: var(--color-interactions-menu);\n$color-interactions-menu-hover: var(--color-interactions-menu-hover);\n$color-interactions-menu-inactive: var(--color-interactions-menu-inactive);\n"],sourceRoot:""}]),___CSS_LOADER_EXPORT___.locals={"toolbar-button":"ToolbarButton__toolbar-button__KIJB6",toolbarButton:"ToolbarButton__toolbar-button__KIJB6","icon-container":"ToolbarButton__icon-container__ZEf9E",iconContainer:"ToolbarButton__icon-container__ZEf9E",large:"ToolbarButton__large__YDjpA",basic:"ToolbarButton__basic__PsM2Y",transparent:"ToolbarButton__transparent___w9hR",selected:"ToolbarButton__selected__SxJqz",primary:"ToolbarButton__primary__J7WCr",accept:"ToolbarButton__accept__Hfn1R",cancel:"ToolbarButton__cancel__qYLZw",accent1:"ToolbarButton__accent1__dcxpI",accent2:"ToolbarButton__accent2__OuGAI",accent3:"ToolbarButton__accent3__JwDT5",accent4:"ToolbarButton__accent4__BXXtS",accent5:"ToolbarButton__accent5__bvBvH","status-indicator":"ToolbarButton__status-indicator__Zgtiz",statusIndicator:"ToolbarButton__status-indicator__Zgtiz","status-enabled":"ToolbarButton__status-enabled__cSFwX",statusEnabled:"ToolbarButton__status-enabled__cSFwX","status-disabled":"ToolbarButton__status-disabled__djo6Z",statusDisabled:"ToolbarButton__status-disabled__djo6Z","status-unread":"ToolbarButton__status-unread__HdEKL",statusUnread:"ToolbarButton__status-unread__HdEKL","status-recording":"ToolbarButton__status-recording__JMGuh",statusRecording:"ToolbarButton__status-recording__JMGuh",left:"ToolbarButton__left__xOpwY",middle:"ToolbarButton__middle__h7pkJ",right:"ToolbarButton__right__e8lxT"};const __WEBPACK_DEFAULT_EXPORT__=___CSS_LOADER_EXPORT___}}]); |