molstar/build/viewer/molstar.css.map

A comprehensive macromolecular library.

{
  "version": 3,
  "sources": ["../../src/mol-plugin-ui/skin/base/normalize.scss", "../../src/mol-plugin-ui/skin/base/base.scss", "../../src/mol-plugin-ui/skin/base/layout/common.scss", "../../src/mol-plugin-ui/skin/base/layout.scss", "../../src/mol-plugin-ui/skin/base/layout/controls-outside.scss", "../../src/mol-plugin-ui/skin/base/_vars.scss", "../../src/mol-plugin-ui/skin/base/layout/controls-landscape.scss", "../../src/mol-plugin-ui/skin/base/layout/controls-portrait.scss", "../../src/mol-plugin-ui/skin/base/ui.scss", "../../src/mol-plugin-ui/skin/base/components/controls-base.scss", "../../src/mol-plugin-ui/skin/base/_colors.scss", "../../src/mol-plugin-ui/skin/base/common.scss", "../../src/mol-plugin-ui/skin/base/components/controls.scss", "../../src/mol-plugin-ui/skin/base/components/help.scss", "../../src/mol-plugin-ui/skin/base/components/line-graph.scss", "../../src/mol-plugin-ui/skin/base/components/log.scss", "../../src/mol-plugin-ui/skin/base/components/slider.scss", "../../src/mol-plugin-ui/skin/base/components/markdown.scss", "../../src/mol-plugin-ui/skin/base/components/misc.scss", "../../src/mol-plugin-ui/skin/base/components/tasks.scss", "../../src/mol-plugin-ui/skin/base/components/viewport.scss", "../../src/mol-plugin-ui/skin/base/components/sequence.scss", "../../src/mol-plugin-ui/skin/base/components/transformer.scss", "../../src/mol-plugin-ui/skin/base/components/toast.scss", "../../src/mol-plugin-ui/skin/base/logo.scss"],
  "sourcesContent": ["/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */\r\n\r\n\r\n@mixin normalize {\r\n  //\r\n  // 1. Set default font family to sans-serif.\r\n  // 2. Prevent iOS and IE text size adjust after device orientation change,\r\n  //    without disabling user zoom.\r\n  //\r\n  * {\r\n    box-sizing: border-box; // 1\r\n  }\r\n\r\n  //\r\n  // Address `[hidden]` styling not present in IE 8/9/10.\r\n  // Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22.\r\n  //\r\n  \r\n  [hidden],\r\n  template {\r\n    display: none;\r\n  }\r\n  \r\n  // Links\r\n  // ==========================================================================\r\n  \r\n  //\r\n  // Remove the gray background color from active links in IE 10.\r\n  //\r\n  \r\n  a {\r\n    background-color: transparent;\r\n  }\r\n  \r\n  //\r\n  // Improve readability of focused elements when they are also in an\r\n  // active/hover state.\r\n  //\r\n  \r\n  a:active,\r\n  a:hover {\r\n    outline: 0;\r\n  }\r\n  \r\n  // Text-level semantics\r\n  // ==========================================================================\r\n  \r\n  //\r\n  // Address styling not present in IE 8/9/10/11, Safari, and Chrome.\r\n  //\r\n  \r\n  abbr[title] {\r\n    border-bottom: 1px dotted;\r\n  }\r\n  \r\n  //\r\n  // Address style set to `bolder` in Firefox 4+, Safari, and Chrome.\r\n  //\r\n  \r\n  b,\r\n  strong {\r\n    font-weight: bold;\r\n  }\r\n  \r\n  //\r\n  // Address inconsistent and variable font size in all browsers.\r\n  //\r\n  \r\n  small {\r\n    font-size: 80%;\r\n  }\r\n  \r\n  // Embedded content\r\n  // ==========================================================================\r\n  \r\n  //\r\n  // Remove border when inside `a` element in IE 8/9/10.\r\n  //\r\n  \r\n  img {\r\n    border: 0;\r\n  }\r\n  \r\n  //\r\n  // Correct overflow not hidden in IE 9/10/11.\r\n  //\r\n  \r\n  svg:not(:root) {\r\n    overflow: hidden;\r\n  }\r\n\r\n  // Forms\r\n  // ==========================================================================\r\n  \r\n  //\r\n  // Known limitation: by default, Chrome and Safari on OS X allow very limited\r\n  // styling of `select`, unless a `border` property is set.\r\n  //\r\n  \r\n  //\r\n  // 1. Correct color not being inherited.\r\n  //    Known issue: affects color of disabled elements.\r\n  // 2. Correct font properties not being inherited.\r\n  // 3. Address margins set differently in Firefox 4+, Safari, and Chrome.\r\n  //\r\n  \r\n  button,\r\n  input,\r\n  optgroup,\r\n  select,\r\n  textarea {\r\n    color: inherit; // 1\r\n    font: inherit; // 2\r\n    margin: 0; // 3\r\n  }\r\n  \r\n  //\r\n  // Address `overflow` set to `hidden` in IE 8/9/10/11.\r\n  //\r\n  \r\n  button {\r\n    overflow: visible;\r\n  }\r\n  \r\n  //\r\n  // Address inconsistent `text-transform` inheritance for `button` and `select`.\r\n  // All other form control elements do not inherit `text-transform` values.\r\n  // Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.\r\n  // Correct `select` style inheritance in Firefox.\r\n  //\r\n  \r\n  button,\r\n  select {\r\n    text-transform: none;\r\n  }\r\n  \r\n  //\r\n  // 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`\r\n  //    and `video` controls.\r\n  // 2. Correct inability to style clickable `input` types in iOS.\r\n  // 3. Improve usability and consistency of cursor style between image-type\r\n  //    `input` and others.\r\n  //\r\n  \r\n  button,\r\n  html input[type=\"button\"], // 1\r\n  input[type=\"reset\"],\r\n  input[type=\"submit\"] {\r\n    -webkit-appearance: button; // 2\r\n    cursor: pointer; // 3\r\n  }\r\n  \r\n  //\r\n  // Re-set default cursor for disabled elements.\r\n  //\r\n  \r\n  button[disabled],\r\n  html input[disabled] {\r\n    cursor: default;\r\n  }\r\n  \r\n  //\r\n  // Remove inner padding and border in Firefox 4+.\r\n  //\r\n  \r\n  button::-moz-focus-inner,\r\n  input::-moz-focus-inner {\r\n    border: 0;\r\n    padding: 0;\r\n  }\r\n  \r\n  //\r\n  // Address Firefox 4+ setting `line-height` on `input` using `!important` in\r\n  // the UA stylesheet.\r\n  //\r\n  \r\n  input {\r\n    line-height: normal;\r\n  }\r\n  \r\n  //\r\n  // It's recommended that you don't attempt to style these elements.\r\n  // Firefox's implementation doesn't respect box-sizing, padding, or width.\r\n  //\r\n  // 1. Address box sizing set to `content-box` in IE 8/9/10.\r\n  // 2. Remove excess padding in IE 8/9/10.\r\n  //\r\n  \r\n  input[type=\"checkbox\"],\r\n  input[type=\"radio\"] {\r\n    box-sizing: border-box; // 1\r\n    padding: 0; // 2\r\n  }\r\n  \r\n  //\r\n  // Fix the cursor style for Chrome's increment/decrement buttons. For certain\r\n  // `font-size` values of the `input`, it causes the cursor style of the\r\n  // decrement button to change from `default` to `text`.\r\n  //\r\n  \r\n  input[type=\"number\"]::-webkit-inner-spin-button,\r\n  input[type=\"number\"]::-webkit-outer-spin-button {\r\n    height: auto;\r\n  }\r\n  \r\n  //\r\n  // Remove default vertical scrollbar in IE 8/9/10/11.\r\n  //\r\n  \r\n  textarea {\r\n    overflow: auto;\r\n  }\r\n}", "\r\n@use \"sass:meta\";\r\n@use 'vars' as *;\r\n@use 'normalize' as *;\r\n@use 'layout' as *;\r\n@use 'ui' as *;\r\n@use 'logo' as *;\r\n\r\n@mixin user-select($select) {\r\n  -webkit-user-select: $select;\r\n     -moz-user-select: $select;\r\n      -ms-user-select: $select; // IE10+\r\n          user-select: $select;\r\n}\r\n\r\n.msp-plugin {\r\n    font-family: \"Helvetica Neue\", \"Segoe UI\", Helvetica, \"Source Sans Pro\", Arial, sans-serif;\r\n    font-size: 14px;\r\n    line-height: 1.42857143;\r\n\r\n    position: absolute;\r\n    left: 0;\r\n    top: 0;\r\n    right: 0;\r\n    bottom: 0;\r\n\r\n    @include normalize;\r\n\r\n    @include layout;    \r\n    @include ui;\r\n    @include logo;\r\n\r\n    .msp-plugin-content {\r\n        color: $font-color;\r\n    }\r\n\r\n    .msp-plugin-init-error {\r\n        white-space: pre;\r\n        margin: $control-spacing;\r\n    }\r\n\r\n    .msp-svg-text {\r\n        fill: $font-color;\r\n    }\r\n\r\n    & {\r\n        background: $default-background;\r\n    }\r\n}", "@use '../vars' as *;\r\n\r\n@mixin layout-common {\r\n    .msp-layout-expanded,\r\n    .msp-layout-standard {\r\n        left: 0;\r\n        right: 0;\r\n        top: 0;\r\n        bottom: 0;\r\n    }\r\n\r\n    .msp-layout-standard {\r\n        border: 1px solid $border-color;\r\n    }\r\n\r\n    .msp-layout-region {\r\n        overflow: hidden;\r\n    }\r\n\r\n    .msp-layout-static,\r\n    .msp-layout-scrollable {\r\n        position: absolute;\r\n    }\r\n\r\n    .msp-scrollable {\r\n        overflow-y: auto;\r\n    }\r\n\r\n    .msp-scrollable-container {\r\n        position: absolute;\r\n        left: 0;\r\n        right: 0;\r\n        top: 0;\r\n        bottom: 0;\r\n        overflow-y: auto;\r\n    }\r\n\r\n    .msp-layout-static {\r\n        overflow: hidden;\r\n    }\r\n\r\n    .msp-layout-top,\r\n    .msp-layout-main,\r\n    .msp-layout-bottom {\r\n        .msp-layout-static {\r\n            left: 0;\r\n            right: 0;\r\n            top: 0;\r\n            bottom: 0;\r\n        }\r\n    }\r\n\r\n    .msp-layout-right {\r\n        .msp-layout-static {\r\n            left: 0;\r\n            right: 0;\r\n            top: 0;\r\n            bottom: 0; // height: $row-height + $control-spacing;\r\n        }\r\n\r\n        .msp-layout-scrollable {\r\n            left: 0;\r\n            right: 0;\r\n            top: $row-height + $control-spacing + 1;\r\n            bottom: 0;\r\n        }\r\n\r\n    }\r\n\r\n    .msp-layout-left {\r\n        .msp-layout-static {\r\n            left: 0;\r\n            right: 0;\r\n            bottom: 0;\r\n            top: 0;\r\n        }\r\n    }\r\n}", "@use 'layout/common' as *;\r\n@use 'layout/controls-landscape.scss' as *;\r\n@use 'layout/controls-outside.scss' as *;\r\n@use 'layout/controls-portrait.scss' as *;\r\n\r\n@mixin layout {\r\n    @include layout-common;\r\n\r\n    .msp-layout-standard-outside {\r\n        position: absolute;\r\n        @include layout-outside;\r\n    }\r\n\r\n    .msp-layout-standard-landscape {\r\n        position: absolute;\r\n        @include layout-landscape;\r\n    }\r\n\r\n    .msp-layout-standard-portrait {\r\n        position: absolute;\r\n        @include layout-portrait;\r\n    }\r\n\r\n    .msp-layout-standard-reactive {\r\n        position: absolute;\r\n\r\n        @media (orientation:landscape),\r\n        (min-width: 1000px) {\r\n            @include layout-landscape;\r\n        }\r\n\r\n        ;\r\n\r\n        @media (orientation:portrait) and (max-width: 1000px) {\r\n            @include layout-portrait;\r\n        }\r\n\r\n        ;\r\n    }\r\n\r\n    .msp-layout-expanded {\r\n        position: fixed;\r\n\r\n        @media (orientation:landscape) {\r\n            @include layout-landscape;\r\n        }\r\n\r\n        ;\r\n\r\n        @media (orientation:portrait) {\r\n            @include layout-portrait;\r\n        }\r\n\r\n        ;\r\n    }\r\n}", "@use '../vars' as *;\r\n\r\n@mixin layout-outside {\r\n    .msp-layout-main {\r\n        position: absolute;\r\n        left: 0;\r\n        right: 0;\r\n        bottom: 0;\r\n        top: 0;\r\n    }\r\n\r\n    .msp-layout-top {\r\n        position: absolute;\r\n        right: 0;\r\n        height: $standard-top-height;\r\n        top: -$standard-top-height;\r\n        width: 50%;\r\n        border-left: 1px solid $border-color;\r\n        border-bottom: 1px solid $border-color;\r\n    }\r\n\r\n    .msp-layout-bottom {\r\n        position: absolute;\r\n        left: 0;\r\n        right: 0;\r\n        height: $standard-top-height;\r\n        top: -$standard-top-height;\r\n        width: 50%;\r\n        border-bottom: 1px solid $border-color;\r\n    }\r\n\r\n    .msp-layout-right {\r\n        position: absolute;\r\n        width: 50%;\r\n        right: 0;\r\n        bottom: -$standard-bottom-height;\r\n        height: $standard-bottom-height;\r\n        border-left: 1px solid $border-color;\r\n        border-top: 1px solid $border-color;\r\n    }\r\n\r\n    .msp-layout-left {\r\n        position: absolute;\r\n        width: 50%;\r\n        left: 0;\r\n        bottom: 0;\r\n        bottom: -$standard-bottom-height;\r\n        height: $standard-bottom-height;\r\n        border-top: 1px solid $border-color;\r\n    }\r\n\r\n    /////////////////////////////////////////\r\n    .msp-layout-hide-right {\r\n        .msp-layout-right {\r\n            display: none;\r\n        }\r\n\r\n        .msp-layout-left {\r\n            width: 100%;\r\n        }\r\n    }\r\n\r\n    .msp-layout-hide-left {\r\n        .msp-layout-left {\r\n            display: none;\r\n        }\r\n\r\n        .msp-layout-right {\r\n            width: 100%;\r\n            border-left: none;\r\n        }\r\n    }\r\n\r\n    .msp-layout-collapse-left {\r\n        .msp-layout-left {\r\n            width: $collapsed-left-width;\r\n        }\r\n\r\n        .msp-layout-right {\r\n            left: $collapsed-left-width;\r\n            width: auto;\r\n        }\r\n    }\r\n\r\n    ///////////////////////////////////\r\n    .msp-layout-hide-top {\r\n        .msp-layout-top {\r\n            display: none;\r\n        }\r\n\r\n        .msp-layout-bottom {\r\n            width: 100%;\r\n            border-left: none;\r\n        }\r\n    }\r\n\r\n    .msp-layout-hide-bottom {\r\n        .msp-layout-bottom {\r\n            display: none;\r\n        }\r\n\r\n        .msp-layout-top {\r\n            width: 100%;\r\n            border-left: none;\r\n        }\r\n    }\r\n}", "@use \"sass:color\";\r\n@use \"colors\" as *;\r\n@forward \"colors\"; \r\n\r\n// measures\r\n\r\n$control-label-width:   110px;\r\n$control-label-short-width:   70px;\r\n$row-height:            32px;\r\n$control-spacing:       10px;\r\n$entity-subtree-offset: 8px;\r\n$info-vertical-padding: 3px;\r\n$slider-border-radius-base: 6px;\r\n\r\n// layout\r\n$expanded-top-height:    100px;\r\n$expanded-bottom-height: 70px; // 3 * $row-height + 2;\r\n$expanded-right-width:   300px;\r\n$expanded-left-width:    330px;\r\n\r\n$collapsed-left-width:   $row-height;\r\n\r\n$expanded-portrait-bottom-height: 10 * ($row-height + 1) + 3 * $control-spacing + 1;\r\n$expanded-portrait-top-height:    3 * $row-height + 1;\r\n\r\n$standard-bottom-height: 8 * ($row-height + 1) + 3 * $control-spacing + 1;\r\n$standard-top-height:    3 * $row-height + 1;\r\n\r\n\r\n$color-accent-cyan:      color-lower-contrast(#95a5a6, 15%);\r\n$color-accent-red:       color-lower-contrast(#e74c3c, 15%);\r\n$color-accent-gray:      color-lower-contrast(#34495e, 10%);\r\n$color-accent-green:     color-lower-contrast(#2ecc71, 10%);\r\n$color-accent-purple:    color-lower-contrast(#9b59b6, 10%);\r\n$color-accent-blue:      color-lower-contrast(#3498db, 5%);\r\n$color-accent-orange:    color-lower-contrast(#e67e22, 5%);\r\n\r\n// TypeClass = 'Root' | 'Group' | 'Data' | 'Object' | 'Representation3D' | 'Behavior'\r\n\r\n$type-class-Root:             $default-background;\r\n$type-class-Data:             color-lower-contrast(#95a5a6, 15%);\r\n$type-class-Object:           color-lower-contrast(#2ecc71, 10%);\r\n$type-class-Behavior:         color-lower-contrast(#9b59b6, 10%);\r\n$type-class-Representation3D: color-lower-contrast(#3498db, 5%);\r\n$type-class-Group:            color-lower-contrast(#e67e22, 5%);\r\n\r\n//////////////////////////////////////////////////\r\n// COLORS and COMPUTED COLORS\r\n\r\n$slider-disabledColor: #ccc;\r\n\r\n$control-background: color-increase-contrast($default-background, 6.5%);\r\n$border-color: color-increase-contrast($default-background, 15%);\r\n$msp-form-control-background: color-lower-contrast($default-background, 2.5%);\r\n\r\n// buttons\r\n$msp-btn-link-font-color: $font-color;\r\n$msp-btn-link-toggle-on-font-color: $font-color;\r\n$msp-btn-link-toggle-off-font-color: color-lower-contrast($font-color, 33%);\r\n$msp-btn-link-toggle-on-hover-font-color: $hover-font-color;\r\n$msp-btn-link-toggle-off-hover-font-color: color.adjust(color-lower-contrast($hover-font-color, 25%), $saturation: -30%, $space: hsl);\r\n\r\n// used for \"actions\" -- i.e. + in selection\r\n$msp-btn-remove-font-color: $font-color;\r\n\r\n$msp-btn-action-background: $msp-form-control-background;\r\n\r\n// update selection etc\r\n//!! $msp-btn-commit-on-font-color: $entity-current-font-color;\r\n$msp-btn-commit-on-hover-font-color: color-lower-contrast($msp-btn-commit-on-font-color, 20%); //!!Change\r\n$msp-btn-commit-on-background: color-lower-contrast($default-background, 2%);\r\n$msp-btn-commit-off-background:  color-lower-contrast($default-background, 4%); //$control-background;\r\n$msp-btn-commit-off-font-color: $font-color;\r\n\r\n// log\r\n$log-font-color: color-lower-contrast($font-color, 5%);\r\n$log-timestamp-font-color: color-lower-contrast($font-color, 20%);\r\n\r\n// highlight\r\n$highlight-info-font-color: $hover-font-color;\r\n$highlight-info-additional-font-color: color-lower-contrast($hover-font-color, 20%);\r\n\r\n// entity state\r\n$entity-color-fully-visible: $font-color;\r\n$entity-color-not-visible: color-lower-contrast($font-color, 66%);\r\n$entity-color-partialy-visible: color-lower-contrast($font-color, 33%);\r\n$entity-tag-color: color-lower-contrast($font-color, 20%);\r\n\r\n// sequence\r\n$sequence-background: $default-background;\r\n$sequence-number-color: $hover-font-color;\r\n\r\n// state\r\n$state-image-height: 96px;", "@use '../vars' as *;\r\n\r\n@mixin layout-landscape {\r\n    .msp-layout-main {\r\n        position: absolute;\r\n        left: $expanded-left-width;\r\n        right: $expanded-right-width;\r\n        bottom: $expanded-bottom-height;\r\n        top: $expanded-top-height;\r\n    }\r\n\r\n    .msp-layout-top {\r\n        position: absolute;\r\n        left: $expanded-left-width;\r\n        right: $expanded-right-width;\r\n        height: $expanded-top-height;\r\n        top: 0;\r\n        border-bottom: 1px solid $border-color;\r\n    }\r\n\r\n    .msp-layout-bottom {\r\n        position: absolute;\r\n        left: $expanded-left-width;\r\n        right: $expanded-right-width;\r\n        height: $expanded-bottom-height;\r\n        bottom: 0;\r\n        border-top: 1px solid $border-color;\r\n    }\r\n\r\n    .msp-layout-right {\r\n        position: absolute;\r\n        width: $expanded-right-width;\r\n        right: 0;\r\n        bottom: 0;\r\n        top: 0;\r\n        border-left: 1px solid $border-color;\r\n    }\r\n\r\n    .msp-layout-left {\r\n        position: absolute;\r\n        width: $expanded-left-width;\r\n        left: 0;\r\n        bottom: 0;\r\n        top: 0;\r\n        border-right: 1px solid $border-color;\r\n    }\r\n\r\n    .msp-layout-hide-right {\r\n        .msp-layout-right {\r\n            display: none;\r\n        }\r\n\r\n        .msp-layout-main,\r\n        .msp-layout-top,\r\n        .msp-layout-bottom {\r\n            right: 0;\r\n        }\r\n    }\r\n\r\n\r\n    .msp-layout-hide-left {\r\n        .msp-layout-left {\r\n            display: none;\r\n        }\r\n\r\n        .msp-layout-main,\r\n        .msp-layout-top,\r\n        .msp-layout-bottom {\r\n            left: 0;\r\n        }\r\n    }\r\n\r\n    .msp-layout-collapse-left {\r\n        .msp-layout-left {\r\n            width: $collapsed-left-width;\r\n        }\r\n\r\n        .msp-layout-main,\r\n        .msp-layout-top,\r\n        .msp-layout-bottom {\r\n            left: $collapsed-left-width;\r\n        }\r\n    }\r\n\r\n    .msp-layout-hide-bottom {\r\n        .msp-layout-bottom {\r\n            display: none;\r\n        }\r\n\r\n        .msp-layout-main {\r\n            bottom: 0;\r\n        }\r\n    }\r\n\r\n    .msp-layout-hide-top {\r\n        .msp-layout-top {\r\n            display: none;\r\n        }\r\n\r\n        .msp-layout-main {\r\n            top: 0;\r\n        }\r\n    }\r\n}", "@use '../vars' as *;\r\n\r\n@mixin layout-portrait {\r\n    .msp-layout-main {\r\n        position: absolute;\r\n        left: 0;\r\n        right: 0;\r\n        bottom: $expanded-portrait-bottom-height;\r\n        top: $expanded-portrait-top-height;\r\n    }\r\n\r\n    .msp-layout-top {\r\n        position: absolute;\r\n        right: 0;\r\n        height: $expanded-portrait-top-height;\r\n        top: 0;\r\n        width: 50%;\r\n        border-left: 1px solid $border-color;\r\n        border-bottom: 1px solid $border-color;\r\n    }\r\n\r\n    .msp-layout-bottom {\r\n        position: absolute;\r\n        left: 0;\r\n        right: 0;\r\n        height: $expanded-portrait-top-height;\r\n        width: 50%;\r\n        border-bottom: 1px solid $border-color;\r\n    }\r\n\r\n    .msp-layout-right {\r\n        position: absolute;\r\n        width: 50%;\r\n        right: 0;\r\n        bottom: 0;\r\n        height: $expanded-portrait-bottom-height;\r\n        border-left: 1px solid $border-color;\r\n        border-top: 1px solid $border-color;\r\n    }\r\n\r\n    .msp-layout-left {\r\n        position: absolute;\r\n        width: 50%;\r\n        left: 0;\r\n        bottom: 0;\r\n        height: $expanded-portrait-bottom-height;\r\n        border-top: 1px solid $border-color;\r\n    }\r\n\r\n    /////////////////////////////////////////\r\n    .msp-layout-hide-right {\r\n        .msp-layout-right {\r\n            display: none;\r\n        }\r\n\r\n        .msp-layout-left {\r\n            width: 100%;\r\n        }\r\n    }\r\n\r\n    .msp-layout-hide-left {\r\n        .msp-layout-left {\r\n            display: none;\r\n        }\r\n\r\n        .msp-layout-right {\r\n            width: 100%;\r\n            border-left: none;\r\n        }\r\n    }\r\n\r\n    .msp-layout-hide-right.msp-layout-hide-left {\r\n        .msp-layout-main {\r\n            bottom: 0;\r\n        }\r\n    }\r\n\r\n    .msp-layout-collapse-left {\r\n        .msp-layout-left {\r\n            width: $collapsed-left-width;\r\n        }\r\n\r\n        .msp-layout-right {\r\n            left: $collapsed-left-width;\r\n            width: auto;\r\n        }\r\n    }\r\n\r\n    ///////////////////////////////////\r\n    .msp-layout-hide-top {\r\n        .msp-layout-top {\r\n            display: none;\r\n        }\r\n\r\n        .msp-layout-bottom {\r\n            width: 100%;\r\n            border-left: none;\r\n        }\r\n    }\r\n\r\n    .msp-layout-hide-bottom {\r\n        .msp-layout-bottom {\r\n            display: none;\r\n        }\r\n\r\n        .msp-layout-top {\r\n            width: 100%;\r\n            border-left: none;\r\n        }\r\n    }\r\n\r\n    .msp-layout-hide-top.msp-layout-hide-bottom {\r\n        .msp-layout-main {\r\n            top: 0;\r\n        }\r\n    }\r\n}", "@use 'vars' as *;\r\n@use './components/controls-base' as *;\r\n@use './components/controls' as *;\r\n@use './components/help' as *;\r\n@use './components/line-graph' as *;\r\n@use './components/log' as *;\r\n@use './components/slider' as *;\r\n@use './components/markdown' as *;\r\n@use './components/misc' as *;\r\n@use './components/tasks' as *;\r\n@use './components/viewport' as *;\r\n@use './components/sequence' as *;\r\n@use './components/transformer' as *;\r\n@use './components/toast' as *;\r\n\r\n@mixin ui {\r\n    ::-webkit-scrollbar {\r\n        width: 10px;\r\n        height: 10px;\r\n    }\r\n\r\n    ::-webkit-scrollbar-track {\r\n        //-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.8);\r\n        border-radius: 0;\r\n        background-color: color-lower-contrast($control-background, 4%);\r\n    }\r\n\r\n    ::-webkit-scrollbar-thumb {\r\n        border-radius: 10px;\r\n        //-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.9);\r\n        background-color: color-increase-contrast($control-background, 16%);\r\n        border: solid 1px transparent;\r\n        background-clip: content-box;\r\n    }\r\n\r\n    @include controls-base;\r\n    @include controls;\r\n    @include help;\r\n    @include line-graph;\r\n    @include log;\r\n    @include slider;\r\n    @include markdown;\r\n    @include misc;\r\n    @include tasks;\r\n    @include viewport;\r\n    @include sequence;\r\n    @include transformer;\r\n    @include toast;\r\n}\r\n", "@use '../vars' as *;\r\n@use '../common' as *;\r\n\r\n\r\n@mixin msp-btn($name, $font, $bg) {\r\n\r\n    .msp-btn-#{$name},\r\n    .msp-btn-#{$name}:active,\r\n    .msp-btn-#{$name}:focus {\r\n        color: $font;\r\n        background: $bg;\r\n    }\r\n\r\n    .msp-btn-#{$name}:hover {\r\n        color: $hover-font-color;\r\n        background: color-lower-contrast($bg, 2.5%);\r\n    }\r\n\r\n    .msp-btn-#{$name}[disabled],\r\n    .msp-btn-#{$name}[disabled]:hover,\r\n    .msp-btn-#{$name}[disabled]:active,\r\n    .msp-btn-#{$name}[disabled]:focus {\r\n        color: color-lower-contrast($font, 1%);\r\n    }\r\n}\r\n\r\n@mixin controls-base {\r\n    .msp-form-control {\r\n        display: block;\r\n        width: 100%;\r\n        background: $msp-form-control-background;\r\n        // color: $font-color;\r\n        border: none; // !important;\r\n        padding: 0 $control-spacing;\r\n        line-height: $row-height - 2px;\r\n        height: $row-height;\r\n        -webkit-appearance: none;\r\n        -moz-appearance: none;\r\n        appearance: none;\r\n        -webkit-box-shadow: none; // iOS <4.3 & Android <4.1\r\n        box-shadow: none;\r\n        // box-shadow: none !important;\r\n        background-image: none;\r\n\r\n        // Firefox\r\n        &::-moz-placeholder {\r\n            color: color-lower-contrast($font-color, 33%);\r\n            opacity: 1; // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526\r\n        }\r\n\r\n        &:-ms-input-placeholder {\r\n            color: color-lower-contrast($font-color, 33%);\r\n        }\r\n\r\n        // Internet Explorer 10+\r\n        &::-webkit-input-placeholder {\r\n            color: color-lower-contrast($font-color, 33%);\r\n        }\r\n\r\n        // Safari and Chrome\r\n\r\n        &:hover {\r\n            color: $hover-font-color;\r\n            background-color: color-increase-contrast($msp-form-control-background, 5%);\r\n            border: none;\r\n            outline-offset: -1px !important;\r\n            outline: 1px solid color-increase-contrast($msp-form-control-background, 20%) !important;\r\n        }\r\n\r\n        &:active,\r\n        &:focus {\r\n            color: $font-color;\r\n            background-color: $msp-form-control-background;\r\n            border: none;\r\n            outline-offset: 0;\r\n            outline: none;\r\n        }\r\n\r\n        // Disabled and read-only inputs\r\n        //\r\n        // HTML5 says that controls under a fieldset > legend:first-child won't be\r\n        // disabled if the fieldset is disabled. Due to implementation difficulty, we\r\n        // don't honor that edge case; we style them as disabled anyway.\r\n        &[disabled],\r\n        &[readonly],\r\n        fieldset[disabled] & {\r\n            background: $default-background;\r\n            opacity: 0.35;\r\n        }\r\n    }\r\n\r\n    .msp-btn {\r\n        @extend .msp-form-control;\r\n\r\n        display: inline-block;\r\n        margin-bottom: 0; // For input.msp-btn\r\n        text-align: center;\r\n        touch-action: manipulation;\r\n        cursor: pointer;\r\n        background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214\r\n        white-space: nowrap;\r\n        @include user-select(none);\r\n\r\n\r\n        padding: 0 $control-spacing;\r\n        line-height: $row-height;\r\n        border: none;\r\n        -moz-box-sizing: border-box;\r\n        box-sizing: border-box;\r\n\r\n        &[disabled] {\r\n            background: $default-background;\r\n            opacity: 0.35;\r\n        }\r\n    }\r\n\r\n    .msp-btn-block {\r\n        display: block;\r\n        width: 100%;\r\n    }\r\n\r\n    .msp-btn,\r\n    .msp-btn:active,\r\n    .msp-btn-link:focus,\r\n    .msp-btn:hover {\r\n        outline: none;\r\n    }\r\n\r\n    .msp-material-icon {\r\n        svg {\r\n            display: inline-flex;\r\n            vertical-align: middle;\r\n            font-size: 1.2em;\r\n            margin-bottom: 3px;\r\n\r\n            fill: currentColor;\r\n            width: 1em;\r\n            height: 1em;\r\n            flex-shrink: 0;\r\n            user-select: none;\r\n        }\r\n    }\r\n\r\n    .msp-btn-block {\r\n        >.msp-material-icon {\r\n            margin-left: 0;\r\n            margin-right: .4em;\r\n        }\r\n    }\r\n\r\n    .msp-btn-childless {\r\n        >.msp-material-icon {\r\n            margin-left: 0;\r\n            margin-right: 0;\r\n        }\r\n    }\r\n\r\n    .msp-btn-icon {\r\n        border: none;\r\n        height: $row-height;\r\n        width: $row-height;\r\n        line-height: $row-height;\r\n        padding: 0;\r\n        text-align: center;\r\n\r\n        &:hover {\r\n            color: $hover-font-color;\r\n            background-color: color-increase-contrast($msp-form-control-background, 5%);\r\n            border: none;\r\n            outline-offset: -1px !important;\r\n            outline: 1px solid color-increase-contrast($msp-form-control-background, 20%) !important;\r\n        }\r\n\r\n        &[disabled],\r\n        &[disabled]:hover,\r\n        &[disabled]:active {\r\n            color: $msp-btn-link-toggle-off-font-color;\r\n        }\r\n    }\r\n\r\n    .msp-btn-icon-small {\r\n        border: none;\r\n        height: $row-height;\r\n        width: 20px;\r\n        // font-size: 85%;\r\n        line-height: $row-height;\r\n        padding: 0;\r\n        text-align: center;\r\n\r\n        &:hover {\r\n            color: $hover-font-color;\r\n            background-color: color-increase-contrast($msp-form-control-background, 5%);\r\n            border: none;\r\n            outline-offset: -1px !important;\r\n            outline: 1px solid color-increase-contrast($msp-form-control-background, 20%) !important;\r\n        }\r\n\r\n        &[disabled],\r\n        &[disabled]:hover,\r\n        &[disabled]:active {\r\n            color: $msp-btn-link-toggle-off-font-color;\r\n        }\r\n    }\r\n\r\n    .msp-btn-link {\r\n        font-weight: normal;\r\n        border-radius: 0;\r\n\r\n        &,\r\n        &:active,\r\n        &.active,\r\n        &[disabled],\r\n        fieldset[disabled] & {\r\n            background-color: transparent;\r\n            -webkit-box-shadow: none; // iOS <4.3 & Android <4.1\r\n            box-shadow: none;\r\n        }\r\n\r\n        &,\r\n        &:hover,\r\n        &:focus,\r\n        &:active {\r\n            border-color: transparent;\r\n        }\r\n\r\n        &:hover,\r\n        &:focus {\r\n            text-decoration: none;\r\n            background-color: transparent;\r\n        }\r\n\r\n        &[disabled],\r\n        fieldset[disabled] & {\r\n\r\n            &:hover,\r\n            &:focus {\r\n                text-decoration: none;\r\n            }\r\n        }\r\n\r\n        .msp-icon {\r\n            font-size: 100%;\r\n        }\r\n    }\r\n\r\n    .msp-btn-link,\r\n    .msp-btn-link:active,\r\n    .msp-btn-link:focus {\r\n        color: $msp-btn-link-font-color;\r\n        text-decoration: none;\r\n    }\r\n\r\n    .msp-btn-link:hover {\r\n        color: $hover-font-color;\r\n        text-decoration: none;\r\n    }\r\n\r\n    .msp-btn-link-toggle-on {\r\n        color: $msp-btn-link-toggle-on-font-color;\r\n    }\r\n\r\n    .msp-btn-link-toggle-off,\r\n    .msp-btn-link-toggle-off:active,\r\n    .msp-btn-link-toggle-off:focus {\r\n        color: $msp-btn-link-toggle-off-font-color !important;\r\n    }\r\n\r\n    .msp-btn-link-toggle-on:hover {\r\n        color: $msp-btn-link-toggle-on-hover-font-color !important;\r\n    }\r\n\r\n    .msp-btn-link-toggle-off:hover {\r\n        color: $msp-btn-link-toggle-off-hover-font-color !important;\r\n    }\r\n\r\n    // @include msp-btn('remove', $msp-btn-remove-font-color, $msp-btn-remove-background);\r\n    @include msp-btn('action', $font-color, $msp-btn-action-background);\r\n    @include msp-btn('commit-on', $msp-btn-commit-on-font-color, $msp-btn-commit-on-background);\r\n    @include msp-btn('commit-off', $msp-btn-commit-off-font-color, $msp-btn-commit-off-background);\r\n\r\n    .msp-btn-remove:hover {\r\n        color: $msp-btn-remove-hover-font-color;\r\n    }\r\n\r\n    .msp-btn-commit-on:hover {\r\n        color: $msp-btn-commit-on-hover-font-color;\r\n    }\r\n\r\n    .msp-btn-action {\r\n        height: $row-height;\r\n        line-height: $row-height;\r\n    }\r\n\r\n    input[type=\"file\"] {\r\n        display: block;\r\n    }\r\n\r\n    // Make range inputs behave like textual form controls\r\n    input[type=\"range\"] {\r\n        display: block;\r\n        width: 100%;\r\n    }\r\n\r\n    // Make multiple select elements height not fixed\r\n    select[multiple],\r\n    select[size] {\r\n        height: auto;\r\n    }\r\n\r\n    // Reset height for `textarea`s\r\n    textarea.msp-form-control {\r\n        height: auto;\r\n    }\r\n\r\n    .msp-control-top-offset {\r\n        margin-top: 1px;\r\n    }\r\n\r\n    .msp-btn-commit {\r\n        text-align: right;\r\n        padding-top: 0;\r\n        padding-bottom: 0;\r\n        padding-right: $control-spacing;\r\n        padding-left: 0;\r\n        line-height: $row-height;\r\n        border: none;\r\n        overflow: hidden;\r\n        font-weight: bold;\r\n\r\n        .msp-icon {\r\n            display: block-inline;\r\n            line-height: $row-height;\r\n            width: $row-height;\r\n            text-align: center;\r\n        }\r\n    }\r\n\r\n    select.msp-form-control {\r\n        background: none;\r\n        background-color: $msp-form-control-background;\r\n        background-size: 8px 12px;\r\n        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAUCAMAAACzvE1FAAAADFBMVEUzMzMzMzMzMzMzMzMKAG/3AAAAA3RSTlMAf4C/aSLHAAAAPElEQVR42q3NMQ4AIAgEQTn//2cLdRKppSGzBYwzVXvznNWs8C58CiussPJj8h6NwgorrKRdTvuV9v16Afn0AYFOB7aYAAAAAElFTkSuQmCC);\r\n        background-repeat: no-repeat;\r\n        background-position: right $control-spacing center;\r\n        padding-right: ($row-height - 8px);\r\n    }\r\n\r\n    select.msp-form-control:-moz-focusring {\r\n        color: transparent;\r\n        text-shadow: 0 0 0 $font-color;\r\n    }\r\n\r\n    .msp-default-bg {\r\n        background: $default-background;\r\n    }\r\n\r\n    .msp-transparent-bg {\r\n        background: transparent;\r\n    }\r\n\r\n    .msp-no-hover-outline {\r\n        &:hover {\r\n            color: $hover-font-color;\r\n            background-color: inherit;\r\n            border: none;\r\n            outline-offset: 0 !important;\r\n            outline: none !important;\r\n        }\r\n    }\r\n\r\n    .msp-icon-inline {\r\n        margin-right: 8px;\r\n    }\r\n}", "@use \"sass:color\";\r\n\r\n$default-background:         color.invert(#111318, $space: rgb) !default;\r\n$font-color:                 color.invert(#ccd4e0, $space: rgb) !default;\r\n$hover-font-color:           color.invert(#51A2FB, $space: rgb) !default;\r\n$entity-current-font-color:  color.invert(#68BEFD, $space: rgb) !default;\r\n$msp-btn-commit-on-font-color:   color.invert(#68BEFD, $space: rgb) !default;\r\n$entity-badge-font-color:    color.adjust(#ccd4e0, $lightness: 10%) !default;\r\n$msp-btn-remove-background:      #DE0A28 !default;\r\n$msp-btn-remove-hover-font-color:#F2F4F7 !default;\r\n\r\n// used in LOG\r\n$log-message:          #0CCA5D !default;\r\n$log-info:             #5E3673 !default;\r\n$log-warning:          #FCC937 !default;\r\n$log-error:            #FD354B !default;\r\n\r\n$logo-background: color.invert(#111318, $space: rgb) !default;\r\n\r\n$color-adjust-sign:     1 !default;\r\n\r\n@function color-lower-contrast($color, $amount) {\r\n    @return color.adjust($color, $lightness: $color-adjust-sign * $amount, $space: hsl);\r\n}\r\n\r\n@function color-increase-contrast($color, $amount) {\r\n    @return color.adjust($color, $lightness: -$color-adjust-sign * $amount, $space: hsl);\r\n}", "@mixin non-selectable {\r\n    -webkit-user-select: none; /* Chrome/Safari */\r\n    -moz-user-select: none; /* Firefox */\r\n    -ms-user-select: none; /* IE10+ */\r\n    /* Rules below not implemented in browsers yet */\r\n    -o-user-select: none;\r\n    user-select: none;\r\n\r\n    cursor: default;\r\n}\r\n\r\n@mixin user-select($select) {\r\n  -webkit-user-select: $select;\r\n     -moz-user-select: $select;\r\n      -ms-user-select: $select; // IE10+\r\n          user-select: $select;\r\n}", "@use \"sass:math\";\r\n@use \"sass:color\";\r\n\r\n@use '../vars' as *;\r\n@use '../common' as *;\r\n\r\n@mixin controls {\r\n    .msp-control-row {\r\n        position: relative;\r\n        height: $row-height;\r\n        background: $default-background;\r\n        margin-top: 1px;\r\n\r\n        select,\r\n        button,\r\n        input[type=text] {\r\n            @extend .msp-form-control;\r\n        }\r\n\r\n        button {\r\n            @extend .msp-btn;\r\n            @extend .msp-btn-block;\r\n        }\r\n\r\n        >span.msp-control-row-label,\r\n        >button.msp-control-button-label {\r\n            line-height: $row-height;\r\n            display: block;\r\n            width: $control-label-width + $control-spacing;\r\n            text-align: right;\r\n            padding: 0 $control-spacing;\r\n            color: color-lower-contrast($font-color, 15%);\r\n            overflow: hidden;\r\n            text-overflow: ellipsis;\r\n            white-space: nowrap;\r\n            position: relative;\r\n\r\n            @include non-selectable;\r\n        }\r\n\r\n        >button.msp-control-button-label {\r\n            background: $default-background;\r\n            cursor: pointer;\r\n        }\r\n\r\n        .msp-control-current {\r\n            background: $default-background;\r\n        }\r\n\r\n        >div.msp-control-row-ctrl {\r\n            position: absolute;\r\n            left: $control-label-width + $control-spacing;\r\n            top: 0;\r\n            right: 0;\r\n            bottom: 0;\r\n        }\r\n\r\n        >div.msp-control-row-text {\r\n            position: absolute;\r\n            left: $control-label-width + $control-spacing;\r\n            top: 0;\r\n            right: 0;\r\n            bottom: 0;\r\n            display: flex;\r\n            align-items: center;\r\n            padding: 0 $control-spacing;\r\n        }\r\n\r\n        >div {\r\n            background: $msp-form-control-background;\r\n        }\r\n\r\n        >.msp-flex-row {\r\n            background: $default-background;\r\n        }\r\n    }\r\n\r\n    .msp-control-label-short {\r\n        >span {\r\n            width: $control-label-short-width + $control-spacing !important;\r\n        }\r\n\r\n        >div:nth-child(2) {\r\n            left: $control-label-short-width + $control-spacing !important;\r\n        }\r\n    }\r\n\r\n    .msp-control-col-2 {\r\n        float: left;\r\n        width: 50%;\r\n    }\r\n\r\n    .msp-control-twoline {\r\n        height: 2 * $row-height !important;\r\n    }\r\n\r\n    .msp-control-group {\r\n        position: relative;\r\n    }\r\n\r\n    .msp-toggle-button {\r\n        .msp-icon {\r\n            display: inline-block;\r\n            margin-right: 6px;\r\n        }\r\n\r\n        >div>button:hover {\r\n            border-color: color-increase-contrast($msp-form-control-background, 5%) !important;\r\n            border: none;\r\n            outline-offset: -1px !important;\r\n            outline: 1px solid color-increase-contrast($msp-form-control-background, 20%) !important;\r\n        }\r\n    }\r\n\r\n    .msp-slider {\r\n        >div:first-child {\r\n            position: absolute;\r\n            top: 0;\r\n            left: 18px;\r\n            bottom: 0;\r\n            right: 62px;\r\n            display: flex;\r\n        }\r\n\r\n        >div:last-child {\r\n            position: absolute;\r\n            height: $row-height;\r\n            line-height: $row-height;\r\n            text-align: center;\r\n            right: 0;\r\n            width: 50px;\r\n            top: 0;\r\n            bottom: 0;\r\n        }\r\n\r\n        &-no-input {\r\n            > div:first-child {\r\n                right: 18px;\r\n            }\r\n            > div:last-child {\r\n                visibility: hidden;\r\n                width: 0;\r\n            }\r\n        }\r\n\r\n        input[type=text] {\r\n            padding-right: 6px;\r\n            padding-left: 4px;\r\n            font-size: 80%;\r\n            text-align: right;\r\n        }\r\n\r\n        // input[type=range] {\r\n        //     width: 100%;\r\n        // }\r\n    }\r\n\r\n    .msp-slider2 {\r\n        >div:first-child {\r\n            position: absolute;\r\n            height: $row-height;\r\n            line-height: $row-height;\r\n            text-align: center;\r\n            left: 0;\r\n            width: 25px;\r\n            top: 0;\r\n            bottom: 0;\r\n            font-size: 80%;\r\n        }\r\n\r\n        >div:nth-child(2) {\r\n            position: absolute;\r\n            top: 0;\r\n            left: 35px;\r\n            bottom: 0;\r\n            right: 37px;\r\n            display: flex;\r\n        }\r\n\r\n        >div:last-child {\r\n            position: absolute;\r\n            height: $row-height;\r\n            line-height: $row-height;\r\n            text-align: center;\r\n            right: 0;\r\n            width: 25px;\r\n            top: 0;\r\n            bottom: 0;\r\n            font-size: 80%;\r\n        }\r\n\r\n        input[type=text] {\r\n            padding-right: 4px;\r\n            padding-left: 4px;\r\n            font-size: 80%;\r\n            text-align: center;\r\n        }\r\n\r\n        // input[type=range] {\r\n        //     width: 100%;\r\n        // }\r\n    }\r\n\r\n    .msp-toggle-color-picker {\r\n        button {\r\n            border: $control-spacing solid $msp-form-control-background !important;\r\n            margin: 0;\r\n            text-align: center;\r\n            padding-right: $control-spacing;\r\n            padding-left: $control-spacing;\r\n\r\n            &:hover {\r\n                border-color: color-increase-contrast($msp-form-control-background, 5%) !important;\r\n                border: none;\r\n                outline-offset: -1px !important;\r\n                outline: 1px solid color-increase-contrast($msp-form-control-background, 20%) !important;\r\n            }\r\n        }\r\n\r\n        .msp-color-picker {\r\n            position: absolute;\r\n            z-index: 100000;\r\n            background: $default-background;\r\n            border-top: 1px solid $default-background;\r\n            padding-bottom: math.div($control-spacing, 2);\r\n            width: 100%;\r\n\r\n            // input[type=text] {\r\n            //     background: $msp-form-control-background !important;\r\n            // }\r\n        }\r\n    }\r\n\r\n    .msp-toggle-color-picker-above {\r\n        .msp-color-picker {\r\n            top: -2 * 32px - 16px - math.div($control-spacing, 2);\r\n            height: 2 * 32px + 16px + math.div($control-spacing, 2);\r\n        }\r\n    }\r\n\r\n    .msp-toggle-color-picker-below {\r\n        .msp-color-picker {\r\n            top: $row-height;\r\n            height: 2 * 32px + 16px;\r\n        }\r\n    }\r\n\r\n    .msp-control-offset {\r\n        padding-left: $control-spacing;\r\n    }\r\n\r\n    .msp-accent-offset {\r\n        padding-left: 1px;\r\n        margin-left: $control-spacing - 2;\r\n        border-left: 2px solid $color-accent-orange;\r\n    }\r\n\r\n    // .msp-accent-offset-right {\r\n    //     margin-left: $control-spacing;\r\n    //     padding-right: 1px;\r\n    //     border-right: 2px solid $color-accent-orange;\r\n    // }\r\n\r\n    .msp-control-group-wrapper {\r\n        //border-left-width: math.div($control-spacing, 2);\r\n        //border-left-style: solid;\r\n        //border-left-color: color-increase-contrast($default-background, 10%);\r\n\r\n        margin-bottom: 0px;\r\n        margin-top: 1px;\r\n    }\r\n\r\n    // TODO : get rid of the important\r\n    .msp-control-group-header {\r\n        background: $default-background;\r\n\r\n        >button,\r\n        div {\r\n            padding-left: 4px; // math.div($control-spacing, 2) !important;\r\n            text-align: left;\r\n            height: 24px !important;\r\n            line-height: 24px !important;\r\n            font-size: 85% !important;\r\n            background: $default-background !important;\r\n            color: color-lower-contrast($font-color, 15%);\r\n        }\r\n\r\n        .msp-icon {\r\n            height: 24px !important;\r\n            line-height: 24px !important;\r\n        }\r\n\r\n        >span {\r\n            padding-left: math.div($control-spacing, 2);\r\n            line-height: math.div(2 * $row-height, 3);\r\n            font-size: 70%;\r\n            background: $default-background;\r\n            color: color-lower-contrast($font-color, 15%);\r\n        }\r\n    }\r\n\r\n    .msp-control-current {\r\n        background: $default-background;\r\n    }\r\n\r\n    .msp-control-group-footer {\r\n        background: color-increase-contrast($default-background, 5%);\r\n        height: math.div($control-spacing, 2);\r\n        font-size: 1px;\r\n        margin-top: 1px;\r\n    }\r\n\r\n    .msp-control-group-expander {\r\n        display: block;\r\n        position: absolute;\r\n        line-height: $row-height;\r\n        padding: 0;\r\n        left: 0;\r\n        top: 0;\r\n        width: $control-label-width + $control-spacing;\r\n        text-align: left;\r\n        background: transparent;\r\n\r\n        .msp-icon {\r\n            line-height: $row-height - 3;\r\n            width: $row-height - 1;\r\n            text-align: center;\r\n            // display: inline-block;\r\n            font-size: 100%;\r\n        }\r\n    }\r\n\r\n    .msp-plugin-layout_controls {\r\n        position: absolute;\r\n        left: $control-spacing;\r\n        top: $control-spacing;\r\n    }\r\n\r\n    .msp-plugin-layout_controls>button:first-child {\r\n        margin-right: 6px;\r\n    }\r\n\r\n    .msp-empty-control {\r\n        display: none;\r\n    }\r\n\r\n    .msp-control .msp-btn-block {\r\n        margin-bottom: 0px;\r\n        margin-top: 0px;\r\n    }\r\n\r\n    .msp-row-text {\r\n        height: $row-height;\r\n        position: relative;\r\n        background: $default-background;\r\n        margin-top: 1px;\r\n\r\n        >div {\r\n            line-height: $row-height;\r\n            text-align: center;\r\n            color: color-lower-contrast($font-color, 15%);\r\n        }\r\n    }\r\n\r\n    .msp-help span {\r\n        display: none;\r\n    }\r\n\r\n    .msp-help:hover span {\r\n        display: inline-block;\r\n        background: linear-gradient($default-background, color.change($default-background, $alpha: 0.8));\r\n    }\r\n\r\n    .msp-help-text {\r\n        position: relative;\r\n        background: $default-background;\r\n        margin-top: 1px;\r\n\r\n        >div {\r\n            padding: (math.div($control-spacing, 2)) $control-spacing;\r\n            text-align: left;\r\n            color: color-lower-contrast($font-color, 15%);\r\n        }\r\n\r\n        >p {\r\n            padding: (math.div($control-spacing, 2)) $control-spacing;\r\n            text-align: left;\r\n            color: color-lower-contrast($font-color, 15%);\r\n        }\r\n    }\r\n\r\n    .msp-help-description {\r\n        font-style: italic;\r\n    }\r\n\r\n    .msp-help-legend {\r\n        padding-top: $control-spacing;\r\n    }\r\n\r\n    .msp-scale-legend {\r\n        >div {\r\n            width: 100%;\r\n            height: $control-spacing * 3;\r\n\r\n            >span {\r\n                padding: math.div($control-spacing, 2);\r\n                color: white;\r\n                font-weight: bold;\r\n                background-color: rgba(0, 0, 0, 0.2);\r\n            }\r\n        }\r\n    }\r\n\r\n    .msp-table-legend {\r\n        >div {\r\n            // min-width: 60px;\r\n            margin-right: math.div($control-spacing, 2);\r\n            display: inline-flex;\r\n\r\n            .msp-table-legend-color {\r\n                width: $control-spacing * 3;\r\n                height: $control-spacing * 2;\r\n            }\r\n\r\n            .msp-table-legend-text {\r\n                margin: 0 (math.div($control-spacing, 2));\r\n            }\r\n        }\r\n    }\r\n\r\n    .msp-image-preview {\r\n        position: relative;\r\n        background: $default-background;\r\n        margin-top: 1px;\r\n        padding: $control-spacing;\r\n\r\n        canvas {\r\n            @include user-select(none);\r\n        }\r\n\r\n        >span {\r\n            margin-top: 6px;\r\n            display: block;\r\n            text-align: center;\r\n            font-size: 80%;\r\n            line-height: 15px;\r\n        }\r\n    }\r\n\r\n    .msp-copy-image-wrapper {\r\n        position: relative;\r\n\r\n        div {\r\n            font-weight: bold;\r\n            padding: 3px;\r\n            margin: 1px 0;\r\n            width: 100%;\r\n            background: $msp-form-control-background;\r\n            text-align: center;\r\n        }\r\n\r\n        img {\r\n            margin-top: 1px;\r\n        }\r\n    }\r\n\r\n    .msp-control-text-area-wrapper,\r\n    .msp-text-area-wrapper {\r\n        position: relative;\r\n\r\n        textarea {\r\n            border: none;\r\n            width: 100%;\r\n            height: 100%;\r\n            background: $msp-form-control-background;\r\n            padding: math.div($control-spacing, 2) $control-spacing;\r\n            resize: none;\r\n            font-size: 12px;\r\n            line-height: 16px;\r\n        }\r\n    }\r\n\r\n    .msp-control-text-area-wrapper {\r\n        height: 2 * $row-height !important;\r\n    }\r\n\r\n    .msp-text-area-wrapper {\r\n        height: 3 * $row-height !important;\r\n    }\r\n}", "@use '../vars' as *;\r\n@use '../common' as *;\r\n\r\n@mixin help {\r\n    .msp-help-row {\r\n        position: relative;\r\n        height: $row-height;\r\n        background: $default-background;\r\n