@excalidraw/excalidraw/dist/dev/index.css.map

Excalidraw as a React component

{
  "version": 3,
  "sources": ["../../components/Spinner.scss", "../../components/ToolIcon.scss", "../../css/variables.module.scss", "../../css/theme.scss", "../../components/ButtonIcon.scss", "../../css/variables.module.scss", "../../components/EyeDropper.scss", "../../components/Island.scss", "../../components/ColorPicker/ColorPicker.scss", "../../css/variables.module.scss", "../../../../node_modules/open-color/open-color.scss", "../../components/IconPicker.scss", "../../css/variables.module.scss", "../../../../node_modules/open-color/open-color.scss", "../../components/QuickSearch.scss", "../../components/ScrollableList.scss", "../../components/FontPicker/FontPicker.scss", "../../css/variables.module.scss", "../../components/Range.scss", "../../components/Tooltip.scss", "../../../../node_modules/open-color/open-color.scss", "../../css/variables.module.scss", "../../components/TextInput.scss", "../../components/ProjectName.scss", "../../components/CheckboxItem.scss", "../../components/Avatar.scss", "../../css/variables.module.scss", "../../components/hyperlink/Hyperlink.scss", "../../../../node_modules/open-color/open-color.scss", "../../components/Dialog.scss", "../../components/Modal.scss", "../../components/Stack.scss", "../../components/ConfirmDialog.scss", "../../components/DialogActionButton.scss", "../../components/PublishLibrary.scss", "../../../../node_modules/open-color/open-color.scss", "../../components/dropdownMenu/DropdownMenu.scss", "../../css/variables.module.scss", "../../components/LibraryUnit.scss", "../../components/LibraryMenuItems.scss", "../../components/LibraryMenu.scss", "../../../../node_modules/open-color/open-color.scss", "../../components/TextField.scss", "../../css/theme.scss", "../../components/Button.scss", "../../css/variables.module.scss", "../../components/Actions.scss", "../../components/CommandPalette/CommandPalette.scss", "../../components/Popover.scss", "../../components/ContextMenu.scss", "../../../../node_modules/open-color/open-color.scss", "../../components/RadioGroup.scss", "../../components/Switch.scss", "../../components/ImageExportDialog.scss", "../../css/variables.module.scss", "../../components/FilledButton.scss", "../../components/FixedSideContainer.scss", "../../components/HintViewer.scss", "../../css/variables.module.scss", "../../components/PasteChartDialog.scss", "../../css/variables.module.scss", "../../components/HelpDialog.scss", "../../components/UserList.scss", "../../css/variables.module.scss", "../../components/Card.scss", "../../../../node_modules/open-color/open-color.scss", "../../components/ExportDialog.scss", "../../../../node_modules/open-color/open-color.scss", "../../components/Sidebar/SidebarTrigger.scss", "../../css/variables.module.scss", "../../components/Sidebar/Sidebar.scss", "../../css/variables.module.scss", "../../components/main-menu/DefaultItems.scss", "../../components/OverwriteConfirm/OverwriteConfirm.scss", "../../css/variables.module.scss", "../../components/SearchMenu.scss", "../../components/TTDDialog/MermaidToExcalidraw.scss", "../../components/TTDDialog/TTDDialog.scss", "../../../../node_modules/open-color/open-color.scss", "../../components/Stats/DragInput.scss", "../../components/Stats/Stats.scss", "../../components/ElementLinkDialog.scss", "../../css/variables.module.scss", "../../../../node_modules/open-color/open-color.scss", "../../components/LayerUI.scss", "../../components/Toolbar.scss", "../../css/variables.module.scss", "../../components/Toast.scss", "../../components/SVGLayer.scss", "../../element/ElementCanvasButtons.scss", "../../components/FollowMode/FollowMode.scss", "../../css/app.scss", "../../css/theme.scss", "../../css/styles.scss", "../../../../node_modules/open-color/open-color.scss", "../../css/variables.module.scss", "../../fonts/fonts.css", "../../components/footer/FooterCenter.scss", "../../components/ExcalidrawLogo.scss", "../../components/welcome-screen/WelcomeScreen.scss", "../../components/live-collaboration/LiveCollaborationTrigger.scss", "../../../../node_modules/open-color/open-color.scss"],
  "sourcesContent": ["@import \"open-color/open-color.scss\";\n\n$duration: 1.6s;\n\n.excalidraw {\n  .Spinner {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    height: 100%;\n    margin-left: auto;\n    margin-right: auto;\n\n    --spinner-color: var(--icon-fill-color);\n\n    svg {\n      animation: rotate $duration linear infinite;\n      animation-delay: var(--spinner-delay);\n      transform-origin: center center;\n    }\n\n    circle {\n      stroke: var(--spinner-color);\n      animation: dash $duration linear 0s infinite;\n      stroke-linecap: round;\n    }\n  }\n\n  @keyframes rotate {\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n\n  @keyframes dash {\n    0% {\n      stroke-dasharray: 1, 300;\n      stroke-dashoffset: 0;\n    }\n    50% {\n      stroke-dasharray: 150, 300;\n      stroke-dashoffset: -200;\n    }\n    100% {\n      stroke-dasharray: 1, 300;\n      stroke-dashoffset: -280;\n    }\n  }\n}\n", "@import \"open-color/open-color.scss\";\n@import \"../css/variables.module.scss\";\n\n.excalidraw {\n  .ToolIcon {\n    border-radius: var(--border-radius-lg);\n    display: inline-flex;\n    align-items: center;\n    position: relative;\n    cursor: pointer;\n    -webkit-tap-highlight-color: transparent;\n    user-select: none;\n\n    &__hidden {\n      display: none !important;\n    }\n\n    @include toolbarButtonColorStates;\n  }\n\n  .ToolIcon--plain {\n    background-color: transparent;\n    .ToolIcon__icon {\n      width: 2rem;\n      height: 2rem;\n    }\n  }\n\n  .ToolIcon_type_radio,\n  .ToolIcon_type_checkbox {\n    position: absolute;\n    opacity: 0;\n    pointer-events: none;\n  }\n\n  .ToolIcon__icon {\n    box-sizing: border-box;\n    width: var(--default-button-size);\n    height: var(--default-button-size);\n    color: var(--icon-fill-color);\n\n    display: flex;\n    justify-content: center;\n    align-items: center;\n\n    border-radius: var(--border-radius-lg);\n\n    & + .ToolIcon__label {\n      margin-inline-start: 0;\n    }\n\n    svg {\n      position: relative;\n      width: var(--default-icon-size);\n      height: var(--default-icon-size);\n      color: var(--icon-fill-color);\n    }\n  }\n\n  .ToolIcon__label {\n    display: flex;\n    align-items: center;\n    color: var(--icon-fill-color);\n    font-family: var(--ui-font);\n    margin: 0 0.8em;\n    text-overflow: ellipsis;\n\n    .Spinner {\n      margin-left: 0.6em;\n    }\n  }\n\n  .ToolIcon_size_small .ToolIcon__icon {\n    width: 2rem;\n    height: 2rem;\n    font-size: 0.8em;\n  }\n\n  .ToolIcon_type_button,\n  .Modal .ToolIcon_type_button {\n    padding: 0;\n    border: none;\n    margin: 0;\n    font-size: inherit;\n    background-color: initial;\n\n    &:focus-visible {\n      box-shadow: 0 0 0 2px var(--focus-highlight-color);\n    }\n\n    &.ToolIcon--selected {\n      background-color: var(--button-gray-2);\n\n      &:active {\n        background-color: var(--button-gray-3);\n      }\n    }\n\n    &:active {\n      background-color: var(--button-gray-3);\n    }\n\n    &:disabled {\n      cursor: default;\n\n      &:active,\n      &:focus-visible,\n      &:hover {\n        background-color: initial;\n        border: none;\n        box-shadow: none;\n      }\n\n      svg {\n        color: var(--color-disabled);\n      }\n    }\n\n    &--show {\n      visibility: visible;\n    }\n\n    &--hide {\n      display: none !important;\n    }\n  }\n\n  .ToolIcon_type_floating {\n    background-color: transparent;\n\n    &:hover {\n      background-color: transparent;\n    }\n\n    &:active {\n      background-color: transparent;\n    }\n\n    .ToolIcon__icon {\n      background-color: var(--button-gray-1);\n      &:hover {\n        background-color: var(--button-gray-2);\n      }\n      &:active {\n        background-color: var(--button-gray-3);\n      }\n\n      width: 2rem;\n      height: 2rem;\n    }\n  }\n\n  .ToolIcon__keybinding {\n    position: absolute;\n    bottom: 2px;\n    right: 3px;\n    font-size: 0.625rem;\n    color: var(--keybinding-color);\n    font-family: var(--ui-font);\n    user-select: none;\n  }\n\n  .unlocked-icon {\n    :root[dir=\"ltr\"] & {\n      left: 2px;\n    }\n\n    :root[dir=\"rtl\"] & {\n      right: 2px;\n    }\n  }\n\n  .App-toolbar-container {\n    .ToolIcon__icon {\n      width: var(--lg-button-size);\n      height: var(--lg-button-size);\n\n      @media screen and (max-width: 450px) {\n        width: 1.8rem;\n        height: 1.8rem;\n      }\n      @media screen and (max-width: 379px) {\n        width: 1.5rem;\n        height: 1.5rem;\n      }\n\n      svg {\n        width: var(--lg-icon-size);\n        height: var(--lg-icon-size);\n      }\n    }\n\n    .ToolIcon__LaserPointer .ToolIcon__icon,\n    .ToolIcon__MagicButton .ToolIcon__icon {\n      width: var(--default-button-size);\n      height: var(--default-button-size);\n    }\n  }\n}\n", "@import \"open-color/open-color.scss\";\n\n@mixin isMobile() {\n  @at-root .excalidraw--mobile#{&} {\n    @content;\n  }\n}\n\n@mixin toolbarButtonColorStates {\n  &.fillable {\n    .ToolIcon_type_radio,\n    .ToolIcon_type_checkbox {\n      &:checked + .ToolIcon__icon {\n        --icon-fill-color: var(--color-on-primary-container);\n\n        svg {\n          fill: var(--icon-fill-color);\n        }\n      }\n    }\n  }\n\n  .ToolIcon_type_radio,\n  .ToolIcon_type_checkbox {\n    &:checked + .ToolIcon__icon {\n      background: var(--color-surface-primary-container);\n      --keybinding-color: var(--color-on-primary-container);\n\n      svg {\n        color: var(--color-on-primary-container);\n      }\n    }\n  }\n\n  .ToolIcon__keybinding {\n    bottom: 4px;\n    right: 4px;\n  }\n\n  .ToolIcon__icon {\n    &:hover {\n      background: var(--button-hover-bg);\n    }\n\n    &:active {\n      background: var(--button-hover-bg);\n      border: 1px solid var(--button-active-border);\n\n      svg {\n        color: var(--color-on-primary-container);\n      }\n    }\n\n    &[aria-disabled=\"true\"] {\n      background: initial;\n      border: none;\n\n      svg {\n        color: var(--color-disabled);\n      }\n    }\n  }\n}\n\n@mixin outlineButtonStyles {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  padding: 0.625rem;\n  width: var(--button-width, var(--default-button-size));\n  height: var(--button-height, var(--default-button-size));\n  box-sizing: border-box;\n  border-width: 1px;\n  border-style: solid;\n  border-color: var(--button-border, var(--default-border-color));\n  border-radius: var(--border-radius-lg);\n  cursor: pointer;\n  background-color: var(--button-bg, var(--island-bg-color));\n  color: var(--button-color, var(--color-on-surface));\n  font-family: var(--ui-font);\n\n  svg {\n    width: var(--button-width, var(--lg-icon-size));\n    height: var(--button-height, var(--lg-icon-size));\n  }\n\n  &:hover {\n    background-color: var(--button-hover-bg, var(--island-bg-color));\n    border-color: var(\n      --button-hover-border,\n      var(--button-border, var(--default-border-color))\n    );\n    color: var(\n      --button-hover-color,\n      var(--button-color, var(--text-primary-color, inherit))\n    );\n  }\n\n  &:active {\n    background-color: var(--button-active-bg, var(--island-bg-color));\n    border-color: var(--button-active-border, var(--color-primary-darkest));\n  }\n\n  &.active {\n    background-color: var(\n      --button-selected-bg,\n      var(--color-surface-primary-container)\n    );\n    border-color: var(\n      --button-selected-border,\n      var(--color-surface-primary-container)\n    );\n\n    &:hover {\n      background-color: var(\n        --button-selected-hover-bg,\n        var(--color-surface-primary-container)\n      );\n    }\n\n    svg {\n      color: var(--button-color, var(--color-on-primary-container));\n    }\n  }\n}\n\n@mixin outlineButtonIconStyles {\n  @include outlineButtonStyles;\n  padding: 0;\n\n  svg {\n    width: var(--default-icon-size);\n    height: var(--default-icon-size);\n  }\n}\n\n@mixin avatarStyles {\n  width: var(--avatar-size, 1.5rem);\n  height: var(--avatar-size, 1.5rem);\n  position: relative;\n  border-radius: 100%;\n  outline-offset: 2px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  cursor: pointer;\n  font-size: 0.75rem;\n  font-weight: 700;\n  line-height: 1;\n  color: var(--color-gray-90);\n  flex: 0 0 auto;\n\n  &:active {\n    transform: scale(0.94);\n  }\n\n  &-img {\n    width: 100%;\n    height: 100%;\n    border-radius: 100%;\n  }\n\n  &::before {\n    content: \"\";\n    position: absolute;\n    top: -3px;\n    right: -3px;\n    bottom: -3px;\n    left: -3px;\n    border-radius: 100%;\n  }\n\n  &.is-followed::before {\n    border-color: var(--color-primary-hover);\n    box-shadow: 0 0 0 1px var(--color-primary-hover);\n  }\n  &.is-current-user {\n    cursor: auto;\n  }\n}\n\n@mixin filledButtonOnCanvas {\n  border: none;\n  box-shadow: 0 0 0 1px var(--color-surface-lowest);\n  background-color: var(--color-surface-low);\n\n  &:active {\n    box-shadow: 0 0 0 1px var(--color-brand-active);\n  }\n}\n", "@import \"open-color/open-color.scss\";\n@import \"./variables.module.scss\";\n\n.excalidraw {\n  --theme-filter: none;\n  --button-destructive-bg-color: #{$oc-red-1};\n  --button-destructive-color: #{$oc-red-9};\n  --button-gray-1: #{$oc-gray-2};\n  --button-gray-2: #{$oc-gray-4};\n  --button-gray-3: #{$oc-gray-5};\n  --button-special-active-bg-color: #{$oc-green-0};\n  --dialog-border-color: var(--color-gray-20);\n  --dropdown-icon: url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"292.4\" height=\"292.4\" viewBox=\"0 0 292 292\"><path d=\"M287 197L159 69c-4-3-8-5-13-5s-9 2-13 5L5 197c-3 4-5 8-5 13s2 9 5 13c4 4 8 5 13 5h256c5 0 9-1 13-5s5-8 5-13-1-9-5-13z\"/></svg>');\n  --focus-highlight-color: #{$oc-blue-2};\n  --icon-fill-color: var(--color-on-surface);\n  --icon-green-fill-color: #{$oc-green-9};\n  --default-bg-color: #{$oc-white};\n  --input-bg-color: #{$oc-white};\n  --input-border-color: #{$oc-gray-4};\n  --input-hover-bg-color: #{$oc-gray-1};\n  --input-label-color: #{$oc-gray-7};\n  --island-bg-color: #ffffff;\n  --keybinding-color: var(--color-gray-40);\n  --link-color: #{$oc-blue-7};\n  --overlay-bg-color: #{transparentize($oc-white, 0.12)};\n  --popup-bg-color: var(--island-bg-color);\n  --popup-secondary-bg-color: #{$oc-gray-1};\n  --popup-text-color: #{$oc-black};\n  --popup-text-inverted-color: #{$oc-white};\n  --select-highlight-color: #{$oc-blue-5};\n  --shadow-island: 0px 0px 0.9310142993927002px 0px rgba(0, 0, 0, 0.17),\n    0px 0px 3.1270833015441895px 0px rgba(0, 0, 0, 0.08),\n    0px 7px 14px 0px rgba(0, 0, 0, 0.05);\n\n  --button-hover-bg: var(--color-surface-high);\n  --button-active-bg: var(--color-surface-high);\n  --button-active-border: var(--color-brand-active);\n  --default-border-color: var(--color-surface-high);\n\n  --default-button-size: 2rem;\n  --default-icon-size: 1rem;\n  --lg-button-size: 2.25rem;\n  --lg-icon-size: 1rem;\n  --editor-container-padding: 1rem;\n\n  @media screen and (min-device-width: 1921px) {\n    --lg-button-size: 2.5rem;\n    --lg-icon-size: 1.25rem;\n    --default-button-size: 2.25rem;\n    --default-icon-size: 1.25rem;\n  }\n\n  --scrollbar-thumb: var(--button-gray-2);\n  --scrollbar-thumb-hover: var(--button-gray-3);\n\n  --color-slider-track: hsl(240, 100%, 90%);\n  --color-slider-thumb: var(--color-gray-80);\n\n  --modal-shadow: 0px 100px 80px rgba(0, 0, 0, 0.07),\n    0px 41.7776px 33.4221px rgba(0, 0, 0, 0.0503198),\n    0px 22.3363px 17.869px rgba(0, 0, 0, 0.0417275),\n    0px 12.5216px 10.0172px rgba(0, 0, 0, 0.035),\n    0px 6.6501px 5.32008px rgba(0, 0, 0, 0.0282725),\n    0px 2.76726px 2.21381px rgba(0, 0, 0, 0.0196802);\n  --avatar-border-color: var(--color-gray-20);\n  --sidebar-shadow: 0px 100px 80px rgba(0, 0, 0, 0.07),\n    0px 41.7776px 33.4221px rgba(0, 0, 0, 0.0503198),\n    0px 22.3363px 17.869px rgba(0, 0, 0, 0.0417275),\n    0px 12.5216px 10.0172px rgba(0, 0, 0, 0.035),\n    0px 6.6501px 5.32008px rgba(0, 0, 0, 0.0282725),\n    0px 2.76726px 2.21381px rgba(0, 0, 0, 0.0196802);\n  --sidebar-border-color: var(--color-surface-high);\n  --sidebar-bg-color: var(--island-bg-color);\n  --library-dropdown-shadow: 0px 15px 6px rgba(0, 0, 0, 0.01),\n    0px 8px 5px rgba(0, 0, 0, 0.05), 0px 4px 4px rgba(0, 0, 0, 0.09),\n    0px 1px 2px rgba(0, 0, 0, 0.1), 0px 0px 0px rgba(0, 0, 0, 0.1);\n\n  --space-factor: 0.25rem;\n  --text-primary-color: var(--color-on-surface);\n\n  --color-selection: #6965db;\n\n  --color-icon-white: #{$oc-white};\n\n  --color-primary: #6965db;\n  --color-primary-darker: #5b57d1;\n  --color-primary-darkest: #4a47b1;\n  --color-primary-light: #e3e2fe;\n  --color-primary-light-darker: #d7d5ff;\n  --color-primary-hover: #5753d0;\n\n  --color-gray-10: #f5f5f5;\n  --color-gray-20: #ebebeb;\n  --color-gray-30: #d6d6d6;\n  --color-gray-40: #b8b8b8;\n  --color-gray-50: #999999;\n  --color-gray-60: #7a7a7a;\n  --color-gray-70: #5c5c5c;\n  --color-gray-80: #3d3d3d;\n  --color-gray-85: #242424;\n  --color-gray-90: #1e1e1e;\n  --color-gray-100: #121212;\n\n  --color-disabled: var(--color-gray-40);\n\n  --color-warning: #fceeca;\n  --color-warning-dark: #f5c354;\n  --color-warning-darker: #f3ab2c;\n  --color-warning-darkest: #ec8b14;\n  --color-text-warning: var(--text-primary-color);\n\n  --color-danger: #db6965;\n  --color-danger-dark: #db6965;\n  --color-danger-darker: #d65550;\n  --color-danger-darkest: #d1413c;\n  --color-danger-text: black;\n\n  --color-danger-background: #fff0f0;\n  --color-danger-icon-background: #ffdad6;\n  --color-danger-color: #700000;\n  --color-danger-icon-color: #700000;\n\n  --color-warning-background: var(--color-warning);\n  --color-warning-icon-background: var(--color-warning-dark);\n  --color-warning-color: var(--text-primary-color);\n  --color-warning-icon-color: var(--text-primary-color);\n\n  --color-muted: var(--color-gray-30);\n  --color-muted-darker: var(--color-gray-60);\n  --color-muted-darkest: var(--color-gray-100);\n  --color-muted-background: var(--color-gray-80);\n  --color-muted-background-darker: var(--color-gray-100);\n\n  --color-promo: var(--color-primary);\n\n  --color-success: #cafccc;\n  --color-success-darker: #bafabc;\n  --color-success-darkest: #a5eba8;\n  --color-success-text: #268029;\n  --color-success-contrast: #65bb6a;\n  --color-success-contrast-hover: #6bcf70;\n  --color-success-contrast-active: #6edf74;\n\n  --color-logo-icon: var(--color-primary);\n  --color-logo-text: #190064;\n\n  --border-radius-md: 0.375rem;\n  --border-radius-lg: 0.5rem;\n\n  --color-surface-high: #f1f0ff;\n  --color-surface-mid: #f2f2f7;\n  --color-surface-low: #ececf4;\n  --color-surface-lowest: #ffffff;\n  --color-on-surface: #1b1b1f;\n  --color-brand-hover: #5753d0;\n  --color-on-primary-container: #030064;\n  --color-surface-primary-container: #e0dfff;\n  --color-brand-active: #4440bf;\n  --color-border-outline: #767680;\n  --color-border-outline-variant: #c5c5d0;\n  --color-surface-primary-container: #e0dfff;\n\n  --color-badge: #0b6513;\n  --background-color-badge: #d3ffd2;\n\n  &.theme--dark {\n    &.theme--dark-background-none {\n      background: none;\n    }\n  }\n\n  &.theme--dark {\n    --theme-filter: invert(93%) hue-rotate(180deg);\n    --button-destructive-bg-color: #5a0000;\n    --button-destructive-color: #{$oc-red-3};\n\n    --button-gray-1: #363636;\n    --button-gray-2: #272727;\n    --button-gray-3: #222;\n    --button-special-active-bg-color: #204624;\n    --dialog-border-color: var(--color-gray-80);\n    --dropdown-icon: url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"292.4\" height=\"292.4\" viewBox=\"0 0 292 292\"><path fill=\"%23ced4da\" d=\"M287 197L159 69c-4-3-8-5-13-5s-9 2-13 5L5 197c-3 4-5 8-5 13s2 9 5 13c4 4 8 5 13 5h256c5 0 9-1 13-5s5-8 5-13-1-9-5-13z\"/></svg>');\n    --focus-highlight-color: #{$oc-blue-6};\n    --icon-green-fill-color: #{$oc-green-4};\n    --default-bg-color: #121212;\n    --input-bg-color: #121212;\n    --input-border-color: #2e2e2e;\n    --input-hover-bg-color: #181818;\n    --input-label-color: #{$oc-gray-2};\n    --island-bg-color: #232329;\n    --keybinding-color: var(--color-gray-60);\n    --link-color: #{$oc-blue-4};\n    --overlay-bg-color: #{transparentize($oc-gray-8, 0.88)};\n    --popup-secondary-bg-color: #222;\n    --popup-text-color: #{$oc-gray-4};\n    --popup-text-inverted-color: #2c2c2c;\n    --select-highlight-color: #{$oc-blue-4};\n    --shadow-island: 0px 0px 0.9310142993927002px 0px rgba(0, 0, 0, 0.17),\n      0px 0px 3.1270833015441895px 0px rgba(0, 0, 0, 0.08),\n      0px 7px 14px 0px rgba(0, 0, 0, 0.05);\n\n    --modal-shadow: 0px 100px 80px rgba(0, 0, 0, 0.07),\n      0px 41.7776px 33.4221px rgba(0, 0, 0, 0.0503198),\n      0px 22.3363px 17.869px rgba(0, 0, 0, 0.0417275),\n      0px 12.5216px 10.0172px rgba(0, 0, 0, 0.035),\n      0px 6.6501px 5.32008px rgba(0, 0, 0, 0.0282725),\n      0px 2.76726px 2.21381px rgba(0, 0, 0, 0.0196802);\n    --avatar-border-color: var(--color-gray-85);\n\n    --scrollbar-thumb: #{$oc-gray-8};\n    --scrollbar-thumb-hover: #{$oc-gray-7};\n\n    --color-slider-track: hsl(244, 23%, 39%);\n\n    // will be inverted to a lighter color.\n    --color-selection: #3530c4;\n\n    --color-icon-white: var(--color-gray-90);\n\n    --color-primary: #a8a5ff;\n    --color-primary-darker: #b2aeff;\n    --color-primary-darkest: #beb9ff;\n    --color-primary-light: #4f4d6f;\n    --color-primary-light-darker: #43415e;\n    --color-primary-hover: #bbb8ff;\n\n    --color-disabled: var(--color-gray-70);\n\n    --color-text-warning: var(--color-gray-80);\n\n    --color-danger: #ffa8a5;\n    --color-danger-dark: #672120;\n    --color-danger-darker: #8f2625;\n    --color-danger-darkest: #ac2b29;\n    --color-danger-text: #fbcbcc;\n\n    --color-danger-background: #fbcbcc;\n    --color-danger-icon-background: #672120;\n    --color-danger-color: #261919;\n    --color-danger-icon-color: #fbcbcc;\n\n    --color-warning-background: var(--color-warning);\n    --color-warning-icon-background: var(--color-warning-dark);\n    --color-warning-color: var(--color-gray-80);\n    --color-warning-icon-color: var(--color-gray-80);\n\n    --color-muted: var(--color-gray-80);\n    --color-muted-darker: var(--color-gray-60);\n    --color-muted-darkest: var(--color-gray-20);\n    --color-muted-background: var(--color-gray-40);\n    --color-muted-background-darker: var(--color-gray-20);\n\n    --color-logo-text: #e2dfff;\n\n    --color-surface-high: hsl(245, 10%, 21%);\n    --color-surface-low: hsl(240, 8%, 15%);\n    --color-surface-mid: hsl(240 6% 10%);\n    --color-surface-lowest: hsl(0, 0%, 7%);\n    --color-on-surface: #e3e3e8;\n    --color-brand-hover: #bbb8ff;\n    --color-on-primary-container: #e0dfff;\n    --color-surface-primary-container: #403e6a;\n    --color-brand-active: #d0ccff;\n    --color-border-outline: #8e8d9c;\n    --color-border-outline-variant: #46464f;\n    --color-surface-primary-container: #403e6a;\n  }\n}\n", "@import \"../css/theme\";\n\n.excalidraw {\n  button.standalone {\n    @include outlineButtonIconStyles;\n\n    & > * {\n      // dissalow pointer events on children, so we always have event.target on the button itself\n      pointer-events: none;\n    }\n  }\n}\n", "@import \"open-color/open-color.scss\";\n\n@mixin isMobile() {\n  @at-root .excalidraw--mobile#{&} {\n    @content;\n  }\n}\n\n@mixin toolbarButtonColorStates {\n  &.fillable {\n    .ToolIcon_type_radio,\n    .ToolIcon_type_checkbox {\n      &:checked + .ToolIcon__icon {\n        --icon-fill-color: var(--color-on-primary-container);\n\n        svg {\n          fill: var(--icon-fill-color);\n        }\n      }\n    }\n  }\n\n  .ToolIcon_type_radio,\n  .ToolIcon_type_checkbox {\n    &:checked + .ToolIcon__icon {\n      background: var(--color-surface-primary-container);\n      --keybinding-color: var(--color-on-primary-container);\n\n      svg {\n        color: var(--color-on-primary-container);\n      }\n    }\n  }\n\n  .ToolIcon__keybinding {\n    bottom: 4px;\n    right: 4px;\n  }\n\n  .ToolIcon__icon {\n    &:hover {\n      background: var(--button-hover-bg);\n    }\n\n    &:active {\n      background: var(--button-hover-bg);\n      border: 1px solid var(--button-active-border);\n\n      svg {\n        color: var(--color-on-primary-container);\n      }\n    }\n\n    &[aria-disabled=\"true\"] {\n      background: initial;\n      border: none;\n\n      svg {\n        color: var(--color-disabled);\n      }\n    }\n  }\n}\n\n@mixin outlineButtonStyles {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  padding: 0.625rem;\n  width: var(--button-width, var(--default-button-size));\n  height: var(--button-height, var(--default-button-size));\n  box-sizing: border-box;\n  border-width: 1px;\n  border-style: solid;\n  border-color: var(--button-border, var(--default-border-color));\n  border-radius: var(--border-radius-lg);\n  cursor: pointer;\n  background-color: var(--button-bg, var(--island-bg-color));\n  color: var(--button-color, var(--color-on-surface));\n  font-family: var(--ui-font);\n\n  svg {\n    width: var(--button-width, var(--lg-icon-size));\n    height: var(--button-height, var(--lg-icon-size));\n  }\n\n  &:hover {\n    background-color: var(--button-hover-bg, var(--island-bg-color));\n    border-color: var(\n      --button-hover-border,\n      var(--button-border, var(--default-border-color))\n    );\n    color: var(\n      --button-hover-color,\n      var(--button-color, var(--text-primary-color, inherit))\n    );\n  }\n\n  &:active {\n    background-color: var(--button-active-bg, var(--island-bg-color));\n    border-color: var(--button-active-border, var(--color-primary-darkest));\n  }\n\n  &.active {\n    background-color: var(\n      --button-selected-bg,\n      var(--color-surface-primary-container)\n    );\n    border-color: var(\n      --button-selected-border,\n      var(--color-surface-primary-container)\n    );\n\n    &:hover {\n      background-color: var(\n        --button-selected-hover-bg,\n        var(--color-surface-primary-container)\n      );\n    }\n\n    svg {\n      color: var(--button-color, var(--color-on-primary-container));\n    }\n  }\n}\n\n@mixin outlineButtonIconStyles {\n  @include outlineButtonStyles;\n  padding: 0;\n\n  svg {\n    width: var(--default-icon-size);\n    height: var(--default-icon-size);\n  }\n}\n\n@mixin avatarStyles {\n  width: var(--avatar-size, 1.5rem);\n  height: var(--avatar-size, 1.5rem);\n  position: relative;\n  border-radius: 100%;\n  outline-offset: 2px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  cursor: pointer;\n  font-size: 0.75rem;\n  font-weight: 700;\n  line-height: 1;\n  color: var(--color-gray-90);\n  flex: 0 0 auto;\n\n  &:active {\n    transform: scale(0.94);\n  }\n\n  &-img {\n    width: 100%;\n    height: 100%;\n    border-radius: 100%;\n  }\n\n  &::before {\n    content: \"\";\n    position: absolute;\n    top: -3px;\n    right: -3px;\n    bottom: -3px;\n    left: -3px;\n    border-radius: 100%;\n  }\n\n  &.is-followed::before {\n    border-color: var(--color-primary-hover);\n    box-shadow: 0 0 0 1px var(--color-primary-hover);\n  }\n  &.is-current-user {\n    cursor: auto;\n  }\n}\n\n@mixin filledButtonOnCanvas {\n  border: none;\n  box-shadow: 0 0 0 1px var(--color-surface-lowest);\n  background-color: var(--color-surface-low);\n\n  &:active {\n    box-shadow: 0 0 0 1px var(--color-brand-active);\n  }\n}\n", ".excalidraw {\n  .excalidraw-eye-dropper-container,\n  .excalidraw-eye-dropper-backdrop {\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    z-index: var(--zIndex-eyeDropperBackdrop);\n    touch-action: none;\n  }\n\n  .excalidraw-eye-dropper-container {\n    pointer-events: none;\n  }\n\n  .excalidraw-eye-dropper-backdrop {\n    pointer-events: all;\n  }\n\n  .excalidraw-eye-dropper-preview {\n    pointer-events: none;\n    width: 3rem;\n    height: 3rem;\n    position: fixed;\n    z-index: var(--zIndex-eyeDropperPreview);\n    border-radius: 1rem;\n    border: 1px solid var(--default-border-color);\n    filter: var(--theme-filter);\n  }\n\n  .excalidraw-eye-dropper-trigger {\n    width: 1.25rem;\n    height: 1.25rem;\n    cursor: pointer;\n    padding: 4px;\n    margin-right: -4px;\n    margin-left: -2px;\n    border-radius: 0.5rem;\n    color: var(--icon-fill-color);\n\n    &:hover {\n      background: var(--button-hover-bg);\n    }\n    &.selected {\n      color: var(--color-primary);\n      background: var(--color-primary-light);\n    }\n  }\n}\n", ".excalidraw {\n  .Island {\n    --padding: 0;\n    box-sizing: border-box;\n    background-color: var(--island-bg-color);\n    box-shadow: var(--shadow-island);\n    border-radius: var(--border-radius-lg);\n    padding: calc(var(--padding) * var(--space-factor));\n    position: relative;\n    transition: box-shadow 0.5s ease-in-out;\n\n    &.zen-mode {\n      box-shadow: none;\n    }\n  }\n}\n", "@import \"../../css/variables.module.scss\";\n\n.excalidraw {\n  .focus-visible-none {\n    &:focus-visible {\n      outline: none !important;\n    }\n  }\n\n  .color-picker__heading {\n    padding: 0 0.5rem;\n    font-size: 0.75rem;\n    text-align: left;\n  }\n\n  .color-picker-container {\n    display: grid;\n    grid-template-columns: 1fr 20px 1.625rem;\n    padding: 0.25rem 0px;\n    align-items: center;\n\n    @include isMobile {\n      max-width: 11rem;\n    }\n  }\n\n  .color-picker__top-picks {\n    display: flex;\n    justify-content: space-between;\n  }\n\n  .color-picker__button {\n    --radius: 0.25rem;\n\n    padding: 0;\n    margin: 0;\n    width: 1.35rem;\n    height: 1.35rem;\n    border: 1px solid var(--color-gray-30);\n    border-radius: var(--radius);\n    filter: var(--theme-filter);\n    background-color: var(--swatch-color);\n    background-position: left center;\n    position: relative;\n    font-family: inherit;\n    box-sizing: border-box;\n\n    &:hover {\n      &::after {\n        content: \"\";\n        position: absolute;\n        top: -2px;\n        left: -2px;\n        right: -2px;\n        bottom: -2px;\n        box-shadow: 0 0 0 1px var(--color-gray-30);\n        border-radius: calc(var(--radius) + 1px);\n        filter: var(--theme-filter);\n      }\n    }\n\n    &.active {\n      .color-picker__button-outline {\n        position: absolute;\n        top: -2px;\n        left: -2px;\n        right: -2px;\n        bottom: -2px;\n        box-shadow: 0 0 0 1px var(--color-primary-darkest);\n        z-index: 1; // due hover state so this has preference\n        border-radius: calc(var(--radius) + 1px);\n        filter: var(--theme-filter);\n      }\n    }\n\n    &:focus-visible {\n      outline: none;\n\n      &::after {\n        content: \"\";\n        position: absolute;\n        top: -4px;\n        right: -4px;\n        bottom: -4px;\n        left: -4px;\n        border: 3px solid var(--focus-highlight-color);\n        border-radius: calc(var(--radius) + 1px);\n      }\n\n      &.active {\n        .color-picker__button-outline {\n          display: none;\n        }\n      }\n    }\n\n    &--large {\n      --radius: 0.5rem;\n      width: 1.875rem;\n      height: 1.875rem;\n    }\n\n    &.is-transparent {\n      background-image: url(\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMUlEQVQ4T2NkYGAQYcAP3uCTZhw1gGGYhAGBZIA/nYDCgBDAm9BGDWAAJyRCgLaBCAAgXwixzAS0pgAAAABJRU5ErkJggg==\");\n    }\n\n    &--no-focus-visible {\n      border: 0;\n      &::after {\n        display: none;\n      }\n      &:focus-visible {\n        outline: none !important;\n      }\n    }\n\n    &.active-color {\n      border-radius: calc(var(--radius) + 1px);\n      width: 1.625rem;\n      height: 1.625rem;\n    }\n  }\n\n  .color-picker__button__hotkey-label {\n    position: absolute;\n    right: 4px;\n    bottom: 4px;\n    filter: none;\n    font-size: 11px;\n  }\n\n  .color-picker {\n    background: var(--popup-bg-color);\n    border: 0 solid transparentize($oc-white, 0.75);\n    box-shadow: transparentize($oc-black, 0.75) 0 1px 4px;\n    border-radius: 4px;\n    position: absolute;\n\n    :root[dir=\"ltr\"] & {\n      left: -5.5px;\n    }\n\n    :root[dir=\"rtl\"] & {\n      right: -5.5px;\n    }\n  }\n\n  .color-picker-control-container {\n    display: grid;\n    grid-template-columns: auto 1fr;\n    align-items: center;\n    column-gap: 0.5rem;\n  }\n\n  .color-picker-control-container + .popover {\n    position: static;\n  }\n\n  .color-picker-popover-container {\n    margin-top: -0.25rem;\n\n    :root[dir=\"ltr\"] & {\n      margin-left: 0.5rem;\n    }\n\n    :root[dir=\"rtl\"] & {\n      margin-left: -3rem;\n    }\n  }\n\n  .color-picker-triangle {\n    width: 0;\n    height: 0;\n    border-style: solid;\n    border-width: 0 9px 10px;\n    border-color: transparent transparent var(--popup-bg-color);\n    position: absolute;\n    top: 10px;\n\n    :root[dir=\"ltr\"] & {\n      transform: rotate(270deg);\n      left: -14px;\n    }\n\n    :root[dir=\"rtl\"] & {\n      transform: rotate(90deg);\n      right: -14px;\n    }\n  }\n\n  .color-picker-triangle-shadow {\n    border-color: transparent transparent transparentize($oc-black, 0.9);\n\n    :root[dir=\"ltr\"] & {\n      left: -14px;\n    }\n\n    :root[dir=\"rtl\"] & {\n      right: -16px;\n    }\n  }\n\n  .color-picker-content {\n    display: flex;\n    flex-direction: column;\n    gap: 0.75rem;\n    outline: none;\n  }\n\n  .color-picker-content--default {\n    padding: 0.5rem;\n    display: grid;\n    grid-template-columns: repeat(5, 1.875rem);\n    grid-gap: 0.25rem;\n    border-radius: 4px;\n\n    &:focus {\n      outline: none;\n      box-shadow: 0 0 0 2px var(--focus-highlight-color);\n    }\n  }\n\n  .color-picker-content--canvas {\n    display: flex;\n    flex-direction: column;\n    padding: 0.25rem;\n\n    &-title {\n      color: $oc-gray-6;\n      font-size: 12px;\n      padding: 0 0.25rem;\n    }\n\n    &-colors {\n      padding: 0.5rem 0;\n\n      .color-picker-swatch {\n        margin: 0 0.25rem;\n      }\n    }\n  }\n\n  .color-picker-content .color-input-container {\n    grid-column: 1 / span 5;\n  }\n\n  .color-picker-swatch {\n    position: relative;\n    height: 1.875rem;\n    width: 1.875rem;\n    cursor: pointer;\n    border-radius: 4px;\n    margin: 0;\n    box-sizing: border-box;\n    border: 1px solid #ddd;\n    background-color: currentColor !important;\n    filter: var(--theme-filter);\n\n    &:focus {\n      /* TODO: only show the border when the color is too light to see as a shadow */\n      box-shadow: 0 0 4px 1px currentColor;\n      border-color: var(--select-highlight-color);\n    }\n  }\n\n  .color-picker-transparent {\n    border-radius: 4px;\n    box-shadow: transparentize($oc-black, 0.9) 0 0 0 1px inset;\n    position: absolute;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n  }\n\n  .color-picker-transparent,\n  .color-picker-label-swatch {\n    background: url(\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMUlEQVQ4T2NkYGAQYcAP3uCTZhw1gGGYhAGBZIA/nYDCgBDAm9BGDWAAJyRCgLaBCAAgXwixzAS0pgAAAABJRU5ErkJggg==\")\n      left center;\n  }\n\n  .color-picker-hash {\n    height: var(--default-button-size);\n    flex-shrink: 0;\n    padding: 0.5rem 0.5rem 0.5rem 0.75rem;\n    border: 1px solid var(--default-border-color);\n    border-right: 0;\n    box-sizing: border-box;\n\n    :root[dir=\"ltr\"] & {\n      border-radius: var(--border-radius-lg) 0 0 var(--border-radius-lg);\n    }\n\n    :root[dir=\"rtl\"] & {\n      border-radius: 0 var(--border-radius-lg) var(--border-radius-lg) 0;\n      border-right: 1px solid var(--default-border-color);\n      border-left: 0;\n    }\n\n    color: var(--input-label-color);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    position: relative;\n  }\n\n  .color-input-container {\n    display: flex;\n\n    &:focus-within {\n      box-shadow: 0 0 0 1px var(--color-primary-darkest);\n      border-radius: var(--border-radius-lg);\n    }\n  }\n\n  .color-picker__input-label {\n    display: grid;\n    grid-template-columns: auto 1fr auto auto;\n    gap: 8px;\n    align-items: center;\n    border: 1px solid var(--default-border-color);\n    border-radius: 8px;\n    padding: 0 12px;\n    margin: 8px;\n    box-sizing: border-box;\n\n    &:focus-within {\n      box-shadow: 0 0 0 1px var(--color-primary-darkest);\n      border-radius: var(--border-radius-lg);\n    }\n  }\n\n  .color-picker__input-hash {\n    padding: 0 0.25rem;\n  }\n\n  .color-picker-input {\n    box-sizing: border-box;\n    width: 100%;\n    margin: 0;\n    font-size: 0.875rem;\n    font-family: inherit;\n    background-color: transparent;\n    color: var(--text-primary-color);\n    border: 0;\n    outline: none;\n    height: var(--default-button-size);\n    border: 1px solid var(--default-border-color);\n    border-left: 0;\n    letter-spacing: 0.4px;\n\n    :root[dir=\"ltr\"] & {\n      border-radius: 0 var(--border-radius-lg) var(--border-radius-lg) 0;\n    }\n\n    :root[dir=\"rtl\"] & {\n      border-radius: var(--border-radius-lg) 0 0 var(--border-radius-lg);\n      border-left: 1px solid var(--default-border-color);\n      border-right: 0;\n    }\n\n    padding: 0.5rem;\n    padding-left: 0.25rem;\n    appearance: none;\n\n    &:focus-visible {\n      box-shadow: none;\n    }\n  }\n\n  .color-picker-label-swatch-container {\n    border: 1px solid var(--default-border-color);\n    border-radius: var(--border-radius-lg);\n    width: var(--default-button-size);\n    height: var(--default-button-size);\n    box-sizing: border-box;\n    overflow: hidden;\n  }\n\n  .color-picker-label-swatch {\n    @include outlineButtonStyles;\n    background-color: var(--swatch-color) !important;\n    overflow: hidden;\n    position: relative;\n    filter: var(--theme-filter);\n    border: 0 !important;\n\n    &:after {\n      content: \"\";\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      background: var(--swatch-color);\n    }\n  }\n\n  .color-picker-keybinding {\n    position: absolute;\n    bottom: 2px;\n    font-size: 0.7em;\n\n    :root[dir=\"ltr\"] & {\n      right: 2px;\n    }\n\n    :root[dir=\"rtl\"] & {\n      left: 2px;\n    }\n\n    @include isMobile {\n      display: none;\n    }\n  }\n\n  .color-picker-type-canvasBackground .color-picker-keybinding {\n    color: #aaa;\n  }\n\n  .color-picker-type-elementBackground .color-picker-keybinding {\n    color: $oc-white;\n  }\n\n  .color-picker-swatch[aria-label=\"transparent\"] .color-picker-keybinding {\n    color: #aaa;\n  }\n\n  .color-picker-type-elementStroke .color-picker-keybinding {\n    color: #d4d4d4;\n  }\n\n  &.theme--dark {\n    .color-picker-type-elementBackground .color-picker-keybinding {\n      color: $oc-black;\n    }\n    .color-picker-swatch[aria-label=\"transparent\"] .color-picker-keybinding {\n      color: $oc-black;\n    }\n  }\n}\n", "@import \"open-color/open-color.scss\";\n\n@mixin isMobile() {\n  @at-root .excalidraw--mobile#{&} {\n    @content;\n  }\n}\n\n@mixin toolbarButtonColorStates {\n  &.fillable {\n    .ToolIcon_type_radio,\n    .ToolIcon_type_checkbox {\n      &:checked + .ToolIcon__icon {\n        --icon-fill-color: var(--color-on-primary-container);\n\n        svg {\n          fill: var(--icon-fill-color);\n        }\n      }\n    }\n  }\n\n  .ToolIcon_type_radio,\n  .ToolIcon_type_checkbox {\n    &:checked + .ToolIcon__icon {\n      background: var(--color-surface-primary-container);\n      --keybinding-color: var(--color-on-primary-container);\n\n      svg {\n        color: var(--color-on-primary-container);\n      }\n    }\n  }\n\n  .ToolIcon__keybinding {\n    bottom: 4px;\n    right: 4px;\n  }\n\n  .ToolIcon__icon {\n    &:hover {\n      background: var(--button-hover-bg);\n    }\n\n    &:active {\n      background: var(--button-hover-bg);\n      border: 1px solid var(--button-active-border);\n\n      svg {\n        color: var(--color-on-primary-container);\n      }\n    }\n\n    &[aria-disabled=\"true\"] {\n      background: initial;\n      border: none;\n\n      svg {\n        color: var(--color-disabled);\n      }\n    }\n  }\n}\n\n@mixin outlineButtonStyles {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  padding: 0.625rem;\n  width: var(--button-width, var(--default-button-size));\n  height: var(--button-height, var(--default-button-size));\n  box-sizing: border-box;\n  border-width: 1px;\n  border-style: solid;\n  border-color: var(--button-border, var(--default-border-color));\n  border-radius: var(--border-radius-lg);\n  cursor: pointer;\n  background-color: var(--button-bg, var(--island-bg-color));\n  color: var(--button-color, var(--color-on-surface));\n  font-family: var(--ui-font);\n\n  svg {\n    width: var(--button-width, var(--lg-icon-size));\n    height: var(--button-height, var(--lg-icon-size));\n  }\n\n  &:hover {\n    background-color: var(--button-hover-bg, var(--island-bg-color));\n    border-color: var(\n      --button-hover-border,\n      var(--button-border, var(--default-border-color))\n    );\n    color: var(\n      --button-hover-color,\n      var(--button-color, var(--text-primary-color, inherit))\n    );\n  }\n\n  &:active {\n    background-color: var(--button-active-bg, var(--island-bg-color));\n    border-color: var(--button-active-border, var(--color-primary-darkest));\n  }\n\n  &.active {\n    background-color: var(\n      --button-selected-bg,\n      var(--color-surface-primary-container)\n    );\n    border-color: var(\n      --button-selected-border,\n      var(--color-surface-primary-container)\n    );\n\n    &:hover {\n      background-color: var(\n        --button-selected-hover-bg,\n        var(--color-surface-primary-container)\n      );\n    }\n\n    svg {\n      color: var(--button-color, var(--color-on-primary-container));\n    }\n  }\n}\n\n@mixin outlineButtonIconStyles {\n  @include outlineButtonStyles;\n  padding: 0;\n\n  svg {\n    width: var(--default-icon-size);\n    height: var(--default-icon-size);\n  }\n}\n\n@mixin avatarStyles {\n  width: var(--avatar-size, 1.5rem);\n  height: var(--avatar-size, 1.5rem);\n  position: relative;\n  border-radius: 100%;\n  outline-offset: 2px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  cursor: pointer;\n  font-size: 0.75rem;\n  font-weight: 700;\n  line-height: 1;\n  color: var(--color-gray-90);\n  flex: 0 0 auto;\n\n  &:active {\n    transform: scale(0.94);\n  }\n\n  &-img {\n    width: 100%;\n    height: 100%;\n    border-radius: 100%;\n  }\n\n  &::before {\n    content: \"\";\n    position: absolute;\n    top: -3px;\n    right: -3px;\n    bottom: -3px;\n    left: -3px;\n    border-radius: 100%;\n  }\n\n  &.is-followed::before {\n    border-color: var(--color-primary-hover);\n    box-shadow: 0 0 0 1px var(--color-primary-hover);\n  }\n  &.is-current-user {\n    cursor: auto;\n  }\n}\n\n@mixin filledButtonOnCanvas {\n  border: none;\n  box-shadow: 0 0 0 1px var(--color-surface-lowest);\n  background-color: var(--color-surface-low);\n\n  &:active {\n    box-shadow: 0 0 0 1px var(--color-brand-active);\n  }\n}\n", "//\n//\n//  𝗖 𝗢 𝗟 𝗢 𝗥\n//  v 1.9.1\n//\n//  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n\n\n//  General\n//  ───────────────────────────────────\n\n$oc-white:         #ffffff;\n$oc-black:         #000000;\n\n\n//  Gray\n//  ───────────────────────────────────\n\n$oc-gray-list: (\n  \"0\": #f8f9fa,\n  \"1\": #f1f3f5,\n  \"2\": #e9ecef,\n  \"3\": #dee2e6,\n  \"4\": #ced4da,\n  \"5\": #adb5bd,\n  \"6\": #868e96,\n  \"7\": #495057,\n  \"8\": #343a40,\n  \"9\": #212529\n);\n\n$oc-gray-0: map-get($oc-gray-list, \"0\");\n$oc-gray-1: map-get($oc-gray-list, \"1\");\n$oc-gray-2: map-get($oc-gray-list, \"2\");\n$oc-gray-3: map-get($oc-gray-list, \"3\");\n$oc-gray-4: map-get($oc-gray-list, \"4\");\n$oc-gray-5: map-get($oc-gray-list, \"5\");\n$oc-gray-6: map-get($oc-gray-list, \"6\");\n$oc-gray-7: map-get($oc-gray-list, \"7\");\n$oc-gray-8: map-get($oc-gray-list, \"8\");\n$oc-gray-9: map-get($oc-gray-list, \"9\");\n\n\n//  Red\n//  ───────────────────────────────────\n\n$oc-red-list: (\n  \"0\": #fff5f5,\n  \"1\": #ffe3e3,\n  \"2\": #ffc9c9,\n  \"3\": #ffa8a8,\n  \"4\": #ff8787,\n  \"5\": #ff6b6b,\n  \"6\": #fa5252,\n  \"7\": #f03e3e,\n  \"8\": #e03131,\n  \"9\": #c92a2a\n);\n\n$oc-red-0: map-get($oc-red-list, \"0\");\n$oc-red-1: map-get($oc-red-list, \"1\");\n$oc-red-2: map-get($oc-red-list, \"2\");\n$oc-red-3: map-get($oc-red-list, \"3\");\n$oc-red-4: map-get($oc-red-list, \"4\");\n$oc-red-5: map-get($oc-red-list, \"5\");\n$oc-red-6: map-get($oc-red-list, \"6\");\n$oc-red-7: map-get($oc-red-list, \"7\");\n$oc-red-8: map-get($oc-red-list, \"8\");\n$oc-red-9: map-get($oc-red-list, \"9\");\n\n\n//  Pink\n//  ───────────────────────────────────\n\n$oc-pink-list: (\n  \"0\": #fff0f6,\n  \"1\": #ffdeeb,\n  \"2\": #fcc2d7,\n  \"3\": #faa2c1,\n  \"4\": #f783ac,\n  \"5\": #f06595,\n  \"6\": #e64980,\n  \"7\": #d6336c,\n  \"8\": #c2255c,\n  \"9\": #a61e4d\n);\n\n$oc-pink-0: map-get($oc-pink-list, \"0\");\n$oc-pink-1: map-get($oc-pink-list, \"1\");\n$oc-pink-2: map-get($oc-pink-list, \"2\");\n$oc-pink-3: map-get($oc-pink-list, \"3\");\n$oc-pink-4: map-get($oc-pink-list, \"4\");\n$oc-pink-5: map-get($oc-pink-list, \"5\");\n$oc-pink-6: map-get($oc-pink-list, \"6\");\n$oc-pink-7: map-get($oc-pink-list, \"7\");\n$oc-pink-8: map-get($oc-pink-list, \"8\");\n$oc-pink-9: map-get($oc-pink-list, \"9\");\n\n\n//  Grape\n//  ───────────────────────────────────\n\n$oc-grape-list: (\n  \"0\": #f8f0fc,\n  \"1\": #f3d9fa,\n  \"2\": #eebefa,\n  \"3\": #e599f7,\n  \"4\": #da77f2,\n  \"5\": #cc5de8,\n  \"6\": #be4bdb,\n  \"7\": #ae3ec9,\n  \"8\": #9c36b5,\n  \"9\": #862e9c\n);\n\n$oc-grape-0: map-get($oc-grape-list, \"0\");\n$oc-grape-1: map-get($oc-grape-list, \"1\");\n$oc-grape-2: map-get($oc-grape-list, \"2\");\n$oc-grape-3: map-get($oc-grape-list, \"3\");\n$oc-grape-4: map-get($oc-grape-list, \"4\");\n$oc-grape-5: map-get($oc-grape-list, \"5\");\n$oc-grape-6: map-get($oc-grape-list, \"6\");\n$oc-grape-7: map-get($oc-grape-list, \"7\");\n$oc-grape-8: map-get($oc-grape-list, \"8\");\n$oc-grape-9: map-get($oc-grape-list, \"9\");\n\n\n//  Violet\n//  ───────────────────────────────────\n\n$oc-violet-list: (\n  \"0\": #f3f0ff,\n  \"1\": #e5dbff,\n  \"2\": #d0bfff,\n  \"3\": #b197fc,\n  \"4\": #9775fa,\n  \"5\": #845ef7,\n  \"6\": #7950f2,\n  \"7\": #7048e8,\n  \"8\": #6741d9,\n  \"9\": #5f3dc4\n);\n\n$oc-violet-0: map-get($oc-violet-list, \"0\");\n$oc-violet-1: map-get($oc-violet-list, \"1\");\n$oc-violet-2: map-get($oc-violet-list, \"2\");\n$oc-violet-3: map-get($oc-violet-list, \"3\");\n$oc-violet-4: map-get($oc-violet-list, \"4\");\n$oc-violet-5: map-get($oc-violet-list, \"5\");\n$oc-violet-6: map-get($oc-violet-list, \"6\");\n$oc-violet-7: map-get($oc-violet-list, \"7\");\n$oc-violet-8: map-get($oc-violet-list, \"8\");\n$oc-violet-9: map-get($oc-violet-list, \"9\");\n\n\n//  Indigo\n//  ───────────────────────────────────\n\n$oc-indigo-list: (\n  \"0\": #edf2ff,\n  \"1\": #dbe4ff,\n  \"2\": #bac8ff,\n  \"3\": #91a7ff,\n  \"4\": #748ffc,\n  \"5\": #5c7cfa,\n  \"6\": #4c6ef5,\n  \"7\": #4263eb,\n  \"8\": #3b5bdb,\n  \"9\": #364fc7\n);\n\n$oc-indigo-0: map-get($oc-indigo-list, \"0\");\n$oc-indigo-1: map-get($oc-indigo-list, \"1\");\n$oc-indigo-2: map-get($oc-indigo-list, \"2\");\n$oc-indigo-3: map-get($oc-indigo-list, \"3\");\n$oc-indigo-4: map-get($oc-indigo-list, \"4\");\n$oc-indigo-5: map-get($oc-indigo-list, \"5\");\n$oc-indigo-6: map-get($oc-indigo-list, \"6\");\n$oc-indigo-7: map-get($oc-indigo-list, \"7\");\n$oc-indigo-8: map-get($oc-indigo-list, \"8\");\n$oc-indigo-9: map-get($oc-indigo-list, \"9\");\n\n\n//  Blue\n//  ───────────────────────────────────\n\n$oc-blue-list: (\n  \"0\": #e7f5ff,\n  \"1\": #d0ebff,\n  \"2\": #a5d8ff,\n  \"3\": #74c0fc,\n  \"4\": #4dabf7,\n  \"5\": #339af0,\n  \"6\": #228be6,\n  \"7\": #1c7ed6,\n  \"8\": #1971c2,\n  \"9\": #1864ab\n);\n\n$oc-blue-0: map-get($oc-blue-list, \"0\");\n$oc-blue-1: map-get($oc-blue-list, \"1\");\n$oc-blue-2: map-get($oc-blue-list, \"2\");\n$oc-blue-3: map-get($oc-blue-list, \"3\");\n$oc-blue-4: map-get($oc-blue-list, \"4\");\n$oc-blue-5: map-get($oc-blue-list, \"5\");\n$oc-blue-6: map-get($oc-blue-list, \"6\");\n$oc-blue-7: map-get($oc-blue-list, \"7\");\n$oc-blue-8: map-get($oc-blue-list, \"8\");\n$oc-blue-9: map-get($oc-blue-list, \"9\");\n\n\n//  Cyan\n//  ───────────────────────────────────\n\n$oc-cyan-list: (\n  \"0\": #e3fafc,\n  \"1\": #c5f6fa,\n  \"2\": #99e9f2,\n  \"3\": #66d9e8,\n  \"4\": #3bc9db,\n  \"5\": #22b8cf,\n  \"6\": #15aabf,\n  \"7\": #1098ad,\n  \"8\": #0c8599,\n  \"9\": #0b7285\n);\n\n$oc-cyan-0: map-get($oc-cyan-list, \"0\");\n$oc-cyan-1: map-get($oc-cyan-list, \"1\");\n$oc-cyan-2: map-get($oc-cyan-list, \"2\");\n$oc-cyan-3: map-get($oc-cyan-list, \"3\");\n$oc-cyan-4: map-get($oc-cyan-list, \"4\");\n$oc-cyan-5: map-get($oc-cyan-list, \"5\");\n$oc-cyan-6: map-get($oc-cyan-list, \"6\");\n$oc-cyan-7: map-get($oc-cyan-list, \"7\");\n$oc-cyan-8: map-get($oc-cyan-list, \"8\");\n$oc-cyan-9: map-get($oc-cyan-list, \"9\");\n\n\n//  Teal\n//  ───────────────────────────────────\n\n$oc-teal-list: (\n  \"0\": #e6fcf5,\n  \"1\": #c3fae8,\n  \"2\": #96f2d7,\n  \"3\": #63e6be,\n  \"4\": #38d9a9,\n  \"5\": #20c997,\n  \"6\": #12b886,\n  \"7\": #0ca678,\n  \"8\": #099268,\n  \"9\": #087f5b\n);\n\n$oc-teal-0: map-get($oc-teal-list, \"0\");\n$oc-teal-1: map-get($oc-teal-list, \"1\");\n$oc-teal-2: map-get($oc-teal-list, \"2\");\n$oc-teal-3: map-get($oc-teal-list, \"3\");\n$oc-teal-4: map-get($oc-teal-list, \"4\");\n$oc-teal-5: map-get($oc-teal-list, \"5\");\n$oc-teal-6: map-get($oc-teal-list, \"6\");\n$oc-teal-7: map-get($oc-teal-list, \"7\");\n$oc-teal-8: map-