@fps-games/editor 0.2.0-beta.3 → 0.2.1-beta.1

package/node_modules/@playcanvas/pcui/dist/pcui-theme-green.scss

@@ -0,0 +1,2798 @@
+@use "sass:color";
+$field-padding: 3px;
+$disabled-opacity: 0.4;
+$element-margin: 6px;
+$element-opacity-disabled: 0.4;
+$element-opacity-readonly: 0.7;
+
+$bcg-darkest: #20292b;
+$bcg-darker: #293538;
+$bcg-dark: #2c393c;
+$bcg-primary: #364346;
+$text-darkest: #5b7073;
+$text-dark: #9ba1a3;
+$text-secondary: #b1b8ba;
+$text-primary: #fff;
+$text-active: #f60;
+$error: #fb222f;
+$error-secondary: #d34141;
+$border-primary: #232e30;
+$element-shadow-hover: 0 0 2px 1px rgb(255 102 0 / 30%);
+$element-shadow-active: 0 0 0 1px rgb(255 102 0 / 30%);
+$element-shadow-error: 0 0 0 1px $error-secondary;
+$element-color-placeholder: #829193;
+
+$playicons-regular: url('data:application/font-woff;charset=utf-7;base64,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') format('woff');
+
+
+@font-face {
+    font-family: pc-icon;
+    src: $playicons-regular;
+    font-weight: normal;
+    font-style: normal;
+}
+
+.font-icon {
+    font-family: pc-icon;
+}
+
+.font-thin {
+    font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;
+    font-weight: 100;
+    font-style: normal;
+}
+
+.font-light {
+    font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;
+    font-weight: 200;
+    font-style: normal;
+}
+
+.font-regular {
+    font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;
+    font-weight: normal;
+    font-style: normal;
+}
+
+.font-bold {
+    font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;
+    font-weight: bold;
+    font-style: normal;
+}
+
+.fixed-font {
+    font-family: inconsolatamedium, Monaco, Menlo, 'Ubuntu Mono', Consolas, source-code-pro, monospace;
+    font-weight: normal;
+    font-size: 12px;
+}
+
+/* Apply scrollbar styles globally */
+* {
+    /* Webkit-based browsers */
+    &::-webkit-scrollbar {
+        width: 8px;
+        height: 8px;
+    }
+
+    &::-webkit-scrollbar-track {
+        background: $bcg-darkest;
+    }
+
+    &::-webkit-scrollbar-thumb {
+        background: $text-darkest;
+    }
+
+    &::-webkit-scrollbar-thumb:hover {
+        background: $text-active;
+    }
+
+    &::-webkit-scrollbar-corner {
+        background: $bcg-dark;
+    }
+
+    /* Standardized Properties */
+    @supports not selector(::-webkit-scrollbar) {
+        /* Firefox */
+        scrollbar-width: thin;
+        scrollbar-color: $text-darkest $bcg-darkest;
+    }
+}
+
+.pcui-no-select {
+    -webkit-touch-callout: none;
+    user-select: none;
+}
+
+// flex container
+.pcui-flex {
+    flex-direction: column;
+
+    &:not(.pcui-hidden) {
+        display: flex;
+    }
+}
+
+// grid container
+.pcui-grid {
+    display: grid;
+}
+
+// scrollable element
+.pcui-scrollable {
+    // show scrollbars automatically
+    overflow: auto;
+}
+
+// Components
+// Element styling
+@keyframes pcui-flash-animation {
+    from { outline-color: $text-active; }
+    to { outline-color: rgba($text-active, 0); }
+}
+
+.pcui-element {
+    @extend .font-regular;
+
+    border: 0 solid $border-primary;
+
+    &.flash {
+        outline: 1px solid $text-active;
+        animation: pcui-flash-animation 200ms ease-in-out forwards;
+    }
+
+    &:focus {
+        outline: none;
+    }
+
+    // remove dotted border on focused elements in firefox
+    &::-moz-focus-inner {
+        border: 0;
+    }
+}
+
+.pcui-element.pcui-hidden {
+    display: none;
+}
+
+.pcui-input-element {
+    display: inline-block;
+    border: 1px solid $bcg-darker;
+    border-radius: 2px;
+    box-sizing: border-box;
+    margin: $element-margin;
+    min-height: 24px;
+    height: 24px;
+    background-color: $bcg-dark;
+    vertical-align: top;
+    transition: color 100ms, background-color 100ms, box-shadow 100ms;
+    position: relative;
+    color: $text-secondary;
+
+    > input {
+        height: 100%;
+        width: calc(100% - 16px);
+        padding: 0 $element-margin;
+        line-height: 1;
+        color: inherit;
+        background: transparent;
+        border: none;
+        outline: none;
+        box-shadow: none;
+
+        @extend .fixed-font;
+    }
+
+    &::before {
+        color: inherit;
+    }
+}
+
+.pcui-input-element.pcui-multiple-values {
+    &::before {
+        position: absolute;
+        padding: 0 8px;
+        content: '...';
+        white-space: nowrap;
+
+        @extend .fixed-font;
+
+        top: 5px;
+        font-size: 12px;
+    }
+}
+
+// focus / hover states
+.pcui-input-element:not(.pcui-disabled, .pcui-readonly) {
+    &:hover {
+        background-color: $bcg-darker;
+        color: $text-primary;
+    }
+
+    &:not(.pcui-error):hover {
+        box-shadow: $element-shadow-hover;
+    }
+
+    &.pcui-focus {
+        background-color: $bcg-darkest;
+        box-shadow: $element-shadow-active;
+    }
+}
+
+.pcui-input-element {
+    &.pcui-focus,
+    &:hover {
+        &::after,
+        &::before {
+            display: none;
+        }
+    }
+}
+
+// readonly state
+.pcui-input-element.pcui-readonly {
+    background-color: rgba($bcg-dark, $element-opacity-readonly);
+    border-color: transparent;
+}
+
+// disabled state
+.pcui-input-element.pcui-disabled {
+    color: $text-darkest;
+}
+
+// error state
+.pcui-input-element.pcui-error {
+    color: $text-secondary;
+    box-shadow: $element-shadow-error;
+}
+
+// placeholder
+.pcui-input-element[placeholder] {
+    position: relative;
+
+    &::after {
+        content: attr(placeholder);
+        background-color: $bcg-dark;
+        position: absolute;
+        top: 0;
+        right: 0;
+        padding: 0 8px;
+        line-height: 22px;
+        font-size: 10px;
+        font-weight: 600;
+        white-space: nowrap;
+        color: $element-color-placeholder;
+        pointer-events: none;
+    }
+}
+
+.pcui-text-area-input {
+    min-height: 48px;
+    height: auto;
+
+    > textarea {
+        resize: none;
+        height: 100%;
+        width: calc(100% - 16px);
+        padding: 0 8px;
+        line-height: 22px;
+        color: inherit;
+        background: transparent;
+        border: none;
+        outline: none;
+        box-shadow: none;
+
+        @extend .fixed-font;
+
+        min-height: 44px;
+        min-width: 172px;
+    }
+}
+
+.pcui-text-area-input.pcui-text-area-input-resizable-none {
+    > textarea {
+        resize: none;
+    }
+}
+
+.pcui-text-area-input.pcui-text-area-input-resizable-both {
+    > textarea {
+        resize: both;
+    }
+}
+
+.pcui-text-area-input.pcui-text-area-input-resizable-horizontal {
+    > textarea {
+        resize: horizontal;
+    }
+}
+
+.pcui-text-area-input.pcui-text-area-input-resizable-vertical {
+    > textarea {
+        resize: vertical;
+    }
+}
+
+.pcui-numeric-input-slider-control {
+    display: none;
+    position: absolute;
+    width: 10px;
+    height: 10px;
+    right: 3px;
+    border: 2px solid $bcg-darkest;
+    background-color: $bcg-darker;
+    border-radius: 100px;
+    z-index: 9999;
+    transform: translateY(-50%);
+    top: 50%;
+    cursor: ew-resize;
+}
+
+.pcui-numeric-input-slider-control::after {
+    content: '\E408';
+    font-size: 15px;
+    font-family: pc-icon;
+    position: absolute;
+    left: -5px;
+    top: -5px;
+    transform: rotateZ(90deg);
+}
+
+.pcui-numeric-input-slider-control:hover {
+    opacity: 0.5;
+    color: $text-secondary;
+}
+
+.pcui-numeric-input-slider-control-active {
+    opacity: 1 !important;
+    color: #7f7 !important;
+}
+
+.pcui-numeric-input-slider-control-hidden {
+    display: none !important;
+}
+
+.pcui-numeric-input:hover {
+    .pcui-numeric-input-slider-control {
+        display: block;
+    }
+}
+
+.pcui-numeric-input.pcui-disabled:hover {
+    .pcui-numeric-input-slider-control {
+        display: none;
+    }
+}
+
+.pcui-numeric-input.pcui-disabled,
+.pcui-numeric-input.pcui-readonly {
+    .pcui-numeric-input-slider-control {
+        display: none;
+    }
+}
+
+.pcui-slider {
+    @extend .pcui-no-select;
+
+    display: inline-flex;
+    height: 24px;
+    margin: $element-margin;
+    align-items: center;
+    touch-action: none; // Prevents gestures and touch event interference.
+
+    > .pcui-numeric-input {
+        flex: 1;
+        margin-left: 0;
+    }
+}
+
+.pcui-slider-container {
+    flex: 3;
+}
+
+.pcui-slider-bar {
+    position: relative;
+    width: calc(100% - 18px);
+    height: 4px;
+    margin: 9px 8px;
+    background-color: $bcg-dark;
+    border: 1px solid $bcg-darker;
+}
+
+.pcui-slider-handle {
+    position: absolute;
+    top: -7px;
+    left: 0;
+    margin-left: -9px;
+    width: 8px;
+    height: 16px;
+    background-color: $text-darkest;
+    border: 1px solid $bcg-darker;
+    transition: left 100ms ease;
+
+    &:hover,
+    &:focus {
+        outline: none;
+    }
+}
+
+// active state
+.pcui-slider-active {
+    .pcui-slider-bar {
+        border-color: $bcg-darkest;
+        background-color: $bcg-darkest;
+    }
+
+    .pcui-slider-handle {
+        border-color: $bcg-darkest;
+        background-color: $text-primary;
+        transition: none;
+    }
+}
+
+// hover state
+.pcui-slider:not(.pcui-disabled, .pcui-readonly) {
+    .pcui-slider-handle {
+        &:focus,
+        &:hover {
+            cursor: ew-resize;
+            outline: none;
+            border-color: $bcg-darkest;
+            background-color: $text-primary;
+        }
+    }
+}
+
+.pcui-slider {
+    cursor: pointer;
+
+    &.pcui-slider-active {
+        cursor: ew-resize;
+    }
+}
+
+// readonly state (hide slider)
+.pcui-slider.pcui-readonly {
+    .pcui-numeric-input {
+        flex: 1;
+    }
+
+    .pcui-slider-bar {
+        display: none;
+    }
+}
+
+// multiple values
+.pcui-slider.pcui-multiple-values {
+    .pcui-slider-handle {
+        display: none;
+    }
+}
+
+.pcui-vector-input {
+    @extend .pcui-flex;
+
+    flex-direction: row;
+    align-items: center;
+    gap: $element-margin;
+
+    > .pcui-numeric-input {
+        flex: 1;
+        margin: $element-margin 0;
+    }
+}
+
+// boolean input
+.pcui-boolean-input {
+    display: inline-block;
+    position: relative;
+    box-sizing: border-box;
+    background-color: $bcg-dark;
+    color: #fff;
+    width: 14px;
+    height: 14px;
+    line-height: 1;
+    overflow: hidden;
+    margin: $element-margin;
+    transition: opacity 100ms, background-color 100ms, box-shadow 100ms;
+
+    &:focus {
+        outline: none;
+    }
+}
+
+// ticked
+.pcui-boolean-input.pcui-boolean-input-ticked {
+    background-color: $text-secondary;
+
+    &::after {
+        @extend .font-icon;
+
+        content: '\E372';
+        color: $bcg-darkest;
+        background-color: inherit;
+        font-size: 19px;
+        display: block;
+        margin-top: -2px;
+        margin-left: -2px;
+    }
+}
+
+// hover / focus
+.pcui-boolean-input:not(.pcui-disabled, .pcui-readonly) {
+    &:hover,
+    &:focus {
+        cursor: pointer;
+        background-color: $bcg-darker;
+        box-shadow: $element-shadow-hover;
+    }
+
+    &.pcui-boolean-input-ticked {
+        &:hover,
+        &:focus {
+            background-color: $text-secondary;
+        }
+    }
+}
+
+// disabled state
+.pcui-boolean-input.pcui-disabled {
+    opacity: $element-opacity-disabled;
+}
+
+// showing multiple values
+.pcui-boolean-input.pcui-multiple-values {
+    &::after {
+        position: absolute;
+        font-size: 17px;
+        font-weight: bold;
+        color: $text-secondary;
+        left: 4px;
+        top: -3px;
+        content: '-';
+    }
+}
+
+// toggle type
+.pcui-boolean-input-toggle {
+    display: inline-block;
+    position: relative;
+    width: 30px;
+    height: 16px;
+    border-radius: 8px;
+    flex-shrink: 0;
+    border: 1px solid $bcg-darker;
+    box-sizing: border-box;
+    background-color: $bcg-primary;
+    color: #fff;
+    line-height: 1;
+    overflow: hidden;
+    margin: $element-margin;
+    transition: opacity 100ms, background-color 100ms, box-shadow 100ms;
+
+    &:focus {
+        outline: none;
+    }
+
+    &::after {
+        content: '\00a0';
+        position: absolute;
+        top: 1px;
+        left: 1px;
+        width: 12px;
+        height: 12px;
+        border-radius: 6px;
+        background-color: $text-darkest;
+        transition: left 100ms ease, background-color 100ms ease;
+    }
+}
+
+// ticked
+.pcui-boolean-input-toggle.pcui-boolean-input-ticked {
+    border-color: $bcg-darker;
+
+    &::after {
+        left: 15px;
+        background-color: color.mix($text-darkest, #7f7, 50%);
+    }
+}
+
+// hover focus
+.pcui-boolean-input-toggle:not(.pcui-disabled, .pcui-readonly) {
+    &:hover,
+    &:focus {
+        cursor: pointer;
+        border-color: $bcg-darkest;
+        background-color: $bcg-darkest;
+        box-shadow: $element-shadow-hover;
+
+        &::after {
+            background-color: $error-secondary;
+        }
+    }
+
+    &.pcui-boolean-input-ticked {
+        &:hover,
+        &:focus {
+            border-color: $bcg-darkest;
+            background-color: $bcg-darkest;
+        }
+
+        &::after {
+            background-color: #7f7;
+        }
+    }
+}
+
+// readonly
+.pcui-boolean-input-toggle.pcui-readonly {
+    opacity: $element-opacity-readonly;
+}
+
+// disabled
+.pcui-boolean-input-toggle.pcui-disabled {
+    opacity: $element-opacity-disabled;
+}
+
+// multiple values
+.pcui-boolean-input-toggle.pcui-multiple-values {
+    &::after {
+        left: 8px;
+        background-color: rgba($text-dark, 0.25);
+    }
+}
+
+.pcui-label {
+    display: inline-block;
+    box-sizing: border-box;
+    margin: $element-margin;
+    vertical-align: middle;
+    transition: opacity 100ms;
+    color: $text-secondary;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    user-select: none;
+}
+
+.pcui-label.pcui-default-mousedown {
+    user-select: initial;
+}
+
+.pcui-label.pcui-multiple-values {
+    position: relative;
+    color: transparent;
+
+    &::before {
+        content: '...';
+        color: $text-secondary;
+        white-space: nowrap;
+
+        @extend .fixed-font;
+
+        font-size: 12px;
+    }
+}
+
+.pcui-label.pcui-error {
+    color: $error-secondary;
+}
+
+.pcui-label.pcui-selectable {
+    &:hover {
+        color: $text-active;
+        text-decoration: underline;
+
+        @extend .pcui-no-select;
+    }
+}
+
+// placeholder
+.pcui-label[placeholder] {
+    position: relative;
+
+    &::after {
+        content: attr(placeholder);
+        position: absolute;
+        top: 0;
+        right: 0;
+        padding: 0 8px;
+        color: #999;
+        pointer-events: none;
+    }
+}
+
+// buttons
+.pcui-button {
+    @extend .pcui-no-select;
+
+    display: inline-block;
+    border: 1px solid $bcg-darkest;
+    border-radius: 2px;
+    box-sizing: border-box;
+    background-color: $bcg-dark;
+    color: $text-secondary;
+    padding: 0 8px;
+    margin: $element-margin;
+    height: 28px;
+    line-height: 28px;
+    max-height: 100%;
+    vertical-align: middle;
+    font-size: 12px;
+    font-weight: 600;
+    text-align: center;
+    white-space: nowrap;
+    cursor: pointer;
+    transition: color 100ms, opacity 100ms, box-shadow 100ms;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+// icon
+.pcui-button[data-icon] {
+    // show icon using data-icon attribute
+    // as the content
+    &::before {
+        content: attr(data-icon);
+
+        @extend .font-icon;
+
+        font-weight: 100;
+        font-size: inherit;
+        margin-right: $element-margin;
+        vertical-align: middle;
+    }
+
+    // remove right margin from icons
+    // if the button has no text
+    &:empty {
+        &::before {
+            margin-right: 0;
+        }
+    }
+}
+
+// focus / hover states
+.pcui-button:not(.pcui-disabled, .pcui-readonly) {
+    &:hover,
+    &:focus {
+        color: $text-primary;
+        background-color: $bcg-dark;
+        box-shadow: $element-shadow-hover;
+    }
+
+    &:active {
+        background-color: $bcg-darkest;
+        box-shadow: none;
+    }
+}
+
+// readonly states
+.pcui-button.pcui-readonly {
+    opacity: $element-opacity-readonly;
+    cursor: default;
+}
+
+// disabled states
+.pcui-button.pcui-disabled {
+    opacity: $element-opacity-disabled;
+    cursor: default;
+}
+
+// small button
+.pcui-button.pcui-small {
+    height: 24px;
+    line-height: 24px;
+    font-size: 10px;
+}
+
+.pcui-code {
+    background: #20292b;
+    overflow: auto;
+
+    .pcui-code-inner {
+        color: #f60;
+        font-family: inconsolatamedium, Monaco, Menlo, 'Ubuntu Mono', Consolas, source-code-pro, monospace;
+        font-weight: normal;
+        font-size: 10px;
+        white-space: pre;
+    }
+}
+
+// container element
+.pcui-container {
+    // containers should be relative to each other
+    position: relative;
+    min-width: 0; // this fixes a lot of flex / grid issues
+    min-height: 0; // this fixes a lot of flex / grid issues
+}
+
+// resizable content
+.pcui-container.pcui-resizable {
+    // resizable handle
+    > .pcui-resizable-handle {
+        position: absolute;
+        z-index: 1;
+        opacity: 0;
+        background-color: transparent;
+        touch-action: none;
+
+        &:hover {
+            opacity: 1;
+        }
+    }
+
+    // resizable handle state while resizing
+    &.pcui-resizable-resizing > .pcui-resizable-handle {
+        opacity: 1;
+    }
+
+    // horizontal handle
+    &.pcui-resizable-left,
+    &.pcui-resizable-right {
+        > .pcui-resizable-handle {
+            top: 0;
+            bottom: 0;
+            width: 1px;
+            height: auto;
+            cursor: ew-resize;
+        }
+    }
+
+    &.pcui-resizable-left {
+        > .pcui-resizable-handle {
+            left: 0;
+            border-left: 3px solid $bcg-darkest;
+        }
+    }
+
+    &.pcui-resizable-right {
+        > .pcui-resizable-handle {
+            right: 0;
+            border-right: 3px solid $bcg-darkest;
+        }
+    }
+
+    // vertical handle
+    &.pcui-resizable-top,
+    &.pcui-resizable-bottom {
+        > .pcui-resizable-handle {
+            left: 0;
+            right: 0;
+            width: auto;
+            height: 1px;
+            cursor: ns-resize;
+        }
+    }
+
+    &.pcui-resizable-top {
+        > .pcui-resizable-handle {
+            top: 0;
+            border-top: 3px solid $bcg-darkest;
+        }
+    }
+
+    &.pcui-resizable-bottom {
+        > .pcui-resizable-handle {
+            bottom: 0;
+            border-bottom: 3px solid $bcg-darkest;
+        }
+    }
+}
+
+.pcui-container-dragged {
+    outline: 2px solid $text-primary;
+    box-sizing: border-box;
+    opacity: 0.7;
+    z-index: 1;
+}
+
+.pcui-container-dragged-child {
+    outline: 1px dotted $text-active;
+    box-sizing: border-box;
+}
+
+.pcui-canvas {
+    @extend .pcui-no-select;
+}
+
+// color input
+.pcui-color-input {
+    @extend .pcui-no-select;
+
+    position: relative;
+    display: inline-block;
+    box-sizing: border-box;
+    width: 44px;
+    height: 24px;
+    margin: $element-margin;
+    vertical-align: top;
+    cursor: pointer;
+    transition: opacity 100ms;
+
+    > .pcui-overlay-clickable {
+        position: fixed;
+    }
+
+    > div {
+        position: absolute;
+        inset: 0;
+    }
+
+    // checkerboard pattern
+    // @include checkerboard(#fff, black, calc(44px/5));
+
+    &::after {
+        content: '\00a0';
+        position: absolute;
+        bottom: 0;
+        right: 0;
+        width: 0;
+        height: 0;
+        background-color: transparent;
+        border-bottom: 16px solid $bcg-darker;
+        border-left: 16px solid transparent;
+    }
+}
+
+.picker-color {
+    &.c-1 > .pcui-overlay-content {
+        > .pick-opacity {
+            display: block;
+        }
+
+        > .fields > .field-r {
+            display: block;
+        }
+    }
+
+    &.c-2 > .pcui-overlay-content {
+        > .fields > .field-hex {
+            display: block;
+        }
+    }
+
+    &.c-3 > .pcui-overlay-content {
+        width: 298px;
+
+        > .pick-rect {
+            display: block;
+        }
+
+        > .pick-hue {
+            display: block;
+        }
+
+        > .pick-opacity {
+            display: none;
+        }
+
+        > .fields {
+            > .field-g,
+            > .field-b {
+                display: block;
+            }
+        }
+    }
+
+    &.c-4 > .pcui-overlay-content {
+        width: 320px;
+
+        > .pick-opacity {
+            display: block;
+        }
+
+        > .fields > .field-a {
+            display: block;
+        }
+    }
+
+    > .pcui-overlay-content {
+        border: 1px solid #000;
+        width: 320px;
+        height: 162px;
+
+        // background-color: #333;
+        white-space: nowrap;
+        transition: none;
+
+        > .pick-rect {
+            @extend .pcui-no-select;
+
+            position: relative;
+            display: none;
+            float: left;
+            width: 146px;
+            height: 146px;
+            border: 1px solid #000;
+            box-sizing: border-box;
+            margin: 8px 0 8px 8px;
+            background-color: #f00;
+            touch-action: none;
+            cursor: crosshair;
+
+            > .white {
+                position: absolute;
+                width: 144px;
+                height: 144px;
+                top: 0;
+                left: 0;
+                background: linear-gradient(to right, rgb(255 255 255 / 100%) 0%, rgb(255 255 255 / 1%) 100%);
+            }
+
+            > .black {
+                position: absolute;
+                width: 144px;
+                height: 144px;
+                top: 0;
+                left: 0;
+                background: linear-gradient(to bottom, rgb(0 0 0 / 1%) 0%, rgb(0 0 0 / 100%) 100%);
+            }
+
+            > .handle {
+                position: absolute;
+                top: 0;
+                left: 0;
+                width: 12px;
+                height: 12px;
+                margin: -7px 0 0 -7px;
+                border: 1px solid #000;
+                outline: 1px solid #fff;
+            }
+        }
+
+        > .pick-hue {
+            @extend .pcui-no-select;
+
+            position: relative;
+            display: none;
+            float: left;
+            width: 14px;
+            height: 146px;
+            margin: 8px 0 8px 8px;
+            border: 1px solid #000;
+            box-sizing: border-box;
+            touch-action: none;
+            cursor: crosshair;
+            background: #000;
+            background:
+                linear-gradient(
+                    to bottom,
+                    rgb(255 0 0 / 100%) 0%,
+                    rgb(255 255 0 / 100%) 16.67%,
+                    rgb(0 255 0 / 100%) 33.33%,
+                    rgb(0 255 255 / 100%) 50%,
+                    rgb(0 0 255 / 100%) 66.67%,
+                    rgb(255 0 255 / 100%) 83.33%,
+                    rgb(255 0 0 / 100%) 100%
+                );
+
+            > .handle {
+                position: absolute;
+                top: 0;
+                left: -3px;
+                width: 16px;
+                height: 4px;
+                margin: -3px 0 0;
+                border: 1px solid #000;
+                outline: 1px solid #fff;
+            }
+        }
+
+        > .pick-opacity {
+            @extend .pcui-no-select;
+
+            position: relative;
+            display: none;
+            float: left;
+            width: 12px;
+            height: 144px;
+            margin: 8px 0 8px 8px;
+            border: 1px solid #000;
+            touch-action: none;
+            cursor: crosshair;
+            background: #000;
+            background: linear-gradient(to bottom, #fff 0%, #000 100%);
+
+            > .handle {
+                position: absolute;
+                top: 0;
+                left: -3px;
+                width: 16px;
+                height: 4px;
+                margin: -3px 0 0;
+                border: 1px solid #000;
+                outline: 1px solid #fff;
+            }
+        }
+
+        > .fields {
+            float: left;
+            width: 106px;
+            height: 154px;
+            margin: 0 0 0 8px;
+            padding: 4px;
+
+            > .field {
+                display: none;
+                width: calc(106px - 6px);
+            }
+        }
+    }
+}
+
+.pcui-color-input.pcui-multiple-values {
+    > div {
+        display: none;
+    }
+
+    // @include checkerboard(#465659, #5b696c, calc(44px/5));
+}
+
+// readonly color input
+.pcui-color-input.pcui-readonly {
+    cursor: default;
+
+    &::after {
+        display: none;
+    }
+}
+
+// disabled color input
+.pcui-color-input.pcui-disabled {
+    opacity: $element-opacity-disabled;
+    cursor: default;
+}
+
+// hover / focus states
+.pcui-color-input:not(.pcui-disabled, .pcui-readonly) {
+    &:hover,
+    &:focus {
+        box-shadow: $element-shadow-hover;
+
+        &::after {
+            border-bottom-color: $bcg-darkest;
+        }
+    }
+
+    &:active {
+        box-shadow: $element-shadow-active;
+    }
+}
+
+.pcui-gradient {
+    display: inline-block;
+    flex: 1;
+    height: 24px;
+    box-sizing: border-box;
+    margin: $element-margin;
+    transition: opacity 100ms, box-shadow 100ms;
+    border: 1px solid $bcg-darker;
+    background-color: $bcg-dark;
+
+    > .pcui-canvas {
+        width: 100%;
+        height: 100%;
+        background-color: transparent;
+    }
+}
+
+// disabled gradient input
+.pcui-gradient.pcui-disabled,
+.pcui-gradient.pcui-multiple-values {
+    opacity: $element-opacity-disabled;
+}
+
+// hover / focus states
+.pcui-gradient:not(.pcui-disabled, .pcui-readonly, .pcui-multiple-values) {
+    &:hover,
+    &:focus {
+        cursor: pointer;
+        box-shadow: $element-shadow-hover;
+    }
+
+    &:active {
+        box-shadow: $element-shadow-active;
+    }
+}
+
+.picker-gradient {
+    > .pcui-overlay-content {
+        width: 343px;
+        height: 262px;
+
+        > .picker-gradient-panel {
+            height: 100%;
+            font-size: 11px;
+
+            >.show-selected-position {
+                position: absolute;
+                width: 18px;
+                min-height: 17px !important;
+                height: 17px !important;
+                top: 14px;
+                margin-top: 0;
+                margin-bottom: 0;
+                display: flex;
+                align-items: center;
+                text-align: center;
+                color: #9ba1a3;
+                background-color: #2c393c;
+                border-radius: 2px;
+                justify-content: center;
+
+                >.show-selected-position-input {
+                    width: inherit;
+                    text-align: center;
+                    justify-content: center;
+                    font-style: normal;
+                    font-weight: 400;
+                    font-size: 12px;
+                    line-height: 22px;
+                }
+            }
+
+            > .anchor-crosshair {
+                position: absolute;
+                top: 41.5px;
+                pointer-events: none;
+                background: none;
+
+                >.crosshair-bar {
+                    background: #293538;
+                    width: 1px;
+                    height: 29px;
+                    position: absolute;
+                    top: -34px;
+                    left: 8px;
+                }
+
+                >.show-crosshair-position {
+                    font-style: normal;
+                    font-weight: 400;
+                    font-size: 12px;
+                    font-family: inconsolatamedium, Monaco, Menlo, 'Ubuntu Mono', Consolas, source-code-pro, monospace;
+                    line-height: 22px;
+                    position: absolute;
+                    width: 18px;
+                    min-height: 17px !important;
+                    height: 17px !important;
+                    top: 14px;
+                    margin-top: 0;
+                    margin-bottom: 0;
+                    display: flex;
+                    align-items: center;
+                    text-align: center;
+                    color: #9ba1a3;
+                    background-color: #2c393c;
+                    border-radius: 2px;
+                    justify-content: center;
+                }
+            }
+
+            > .picker-gradient-gradient {
+                width: 321px;
+                height: 28px;
+                display: block;
+                padding: 8px 10px 0 11px;
+                background-color: #2c393c;
+
+                .crosshair-active {
+                    cursor: none;
+                }
+            }
+
+            > .picker-gradient-anchors {
+                width: 320px;
+                height: 28px;
+                display: block;
+                padding: 0 10px 0 11px;
+                background-color: #2c393c;
+            }
+
+            > .picker-gradient-footer {
+                padding: 5px;
+
+                > .pcui-panel-header {
+                    display: none;
+                }
+
+                > .pcui-panel-content {
+                    display: flex;
+
+                    > .pcui-label {
+                        align-self: center;
+                        font-family: inherit;
+                        font-style: normal;
+                        font-weight: 600;
+                        font-size: 12px;
+                        line-height: 19px;
+                        align-content: center;
+                        height: 20px;
+                    }
+
+                    > .pcui-select-input {
+                        align-self: center;
+                        width: 162px;
+                        height: 22px;
+                    }
+
+                    > .pcui-numeric-input {
+                        align-self: center;
+                    }
+
+                    > .pcui-button {
+                        width: 22px;
+                        height: 22px;
+
+                        @extend .font-icon;
+
+                        vertical-align: bottom;
+                        margin: 0;
+                        margin-right: 8px;
+                        margin-top: 6px;
+                    }
+
+                    > .copy-curve-button {
+                        border-color: #2c393c;
+
+                        &::after {
+                            content: '\e351';
+                            position: absolute;
+                            top: 4px;
+                            left: 218px;
+                            font-size: 15px;
+                            text-align: center;
+
+                            @extend .font-icon;
+                        }
+                    }
+
+                    > .paste-curve-button {
+                        border-color: #2c393c;
+
+                        &::after {
+                            content: '\e348';
+                            position: absolute;
+                            top: 4px;
+                            left: 248px;
+                            font-size: 15px;
+                            text-align: center;
+
+                            @extend .font-icon;
+                        }
+                    }
+
+                    > .delete-curve-button {
+                        border-color: #2c393c;
+
+                        &::after {
+                            content: '\e125';
+                            position: absolute;
+                            top: 4px;
+                            left: 278px;
+                            font-size: 15px;
+                            text-align: center;
+
+                            @extend .font-icon;
+                        }
+                    }
+                }
+            }
+
+            > .color-panel {
+                height: 156px;
+
+                > .pcui-panel-header {
+                    display: none;
+                }
+
+                > .pcui-panel-content {
+                    > .color-rect {
+                        margin: 5px 10px 10px;
+                        width: 140px;
+                        height: 140px;
+                        cursor: crosshair;
+                        position: relative;
+                        float: left;
+                        border-width: 1px;
+                    }
+
+                    > .color-handle {
+                        position: absolute;
+                        width: 14px;
+                        height: 14px;
+                        border: 1px solid #000;
+                        outline: 1px solid #fff;
+                        pointer-events: none;
+                    }
+
+                    > .hue-rect,
+                    > .alpha-rect {
+                        margin: 5px 10px 10px 0;
+                        width: 20px;
+                        height: 140px;
+                        cursor: crosshair;
+                        border-width: 1px;
+                    }
+
+                    > .hue-handle,
+                    > .alpha-handle {
+                        position: absolute;
+                        width: 20px;
+                        height: 4px;
+                        border: 1px solid rgb(92 82 79);
+                        outline: 1px solid #fff;
+                        pointer-events: none;
+                    }
+
+                    > .fields {
+                        display: inline-block;
+                        margin: 3px 0 0;
+                        width: 112px;
+                        height: 145px;
+                        vertical-align: top;
+
+                        > .pcui-numeric-input {
+                            margin: 2px 0;
+                            width: 108px;
+                        }
+
+                        > .pcui-text-input {
+                            margin: 2px 0;
+                            min-height: 22px;
+                            min-width: 111px;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
+// panel element
+.pcui-panel {
+    background-color: $bcg-primary;
+}
+
+// header of panel
+.pcui-panel-header {
+    background-color: $bcg-darker;
+    color: $text-primary;
+    font-size: 12px;
+    white-space: nowrap;
+    padding-left: 10px;
+    flex-shrink: 0;
+    align-items: center;
+}
+
+.pcui-panel-header-title {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    flex: 1;
+    color: inherit;
+    font-size: inherit;
+    white-space: inherit;
+    margin: 0 auto 0 0;
+}
+
+// contents of panel
+.pcui-panel-content {
+    flex: 1;
+}
+
+// collapsible panel
+.pcui-panel.pcui-collapsible {
+    // animate height and width
+    transition: height 100ms, width 100ms;
+
+    // cursor pointer on header
+    > .pcui-panel-header {
+        cursor: pointer;
+
+        // expanded icon
+        &::before {
+            @extend .font-icon;
+
+            content: '\E179';
+            font-size: 14px;
+            margin-right: 10px;
+            text-align: center;
+            color: $text-active;
+        }
+
+        // header collapsible hover state
+        &:hover {
+            color: $text-primary;
+
+            &::before {
+                color: $text-primary;
+            }
+        }
+    }
+
+    &.pcui-panel-normal {
+        > .pcui-panel-header::before {
+            content: '\E183';
+            font-weight: 200;
+        }
+    }
+
+    // delay visibility hidden
+    > .pcui-panel-content {
+        transition: visibility 100ms;
+    }
+
+    // collapsed panel
+    &.pcui-collapsed {
+        // hide stuff
+        overflow: hidden;
+
+        // hide contents
+        > .pcui-panel-content {
+            visibility: hidden;
+        }
+
+        > .pcui-panel-header {
+            // collapsed icon
+            &::before {
+                content: '\E180';
+            }
+        }
+
+        &.pcui-panel-normal {
+            > .pcui-panel-header::before {
+                content: '\E184';
+            }
+        }
+
+        // collapsed horizontally
+        &.pcui-panel-horizontal {
+            > .pcui-panel-header {
+                width: 2048px; // this is to make the now vertical header really big
+
+                // rotate the header 90 degrees
+                transform: rotate(90deg);
+                transform-origin: 0% 100%;
+
+                // collapsed icon
+                &::before {
+                    content: '\E177';
+                }
+            }
+
+            &.pcui-panel-normal {
+                > .pcui-panel-header::before {
+                    content: '\E181';
+                }
+            }
+
+            // do not animate visibility
+            > .pcui-panel-content {
+                transition: none;
+            }
+        }
+    }
+}
+
+// resizable panel
+.pcui-panel.pcui-resizable {
+    // hide resize handle if panel is collapsed
+    &.pcui-collapsible.pcui-collapsed {
+        > .pcui-resizable-handle {
+            display: none;
+        }
+    }
+
+    // disable width / height transitions while resizing
+    &.pcui-resizable-resizing {
+        transition: none;
+
+        > .pcui-panel-content {
+            transition: none;
+        }
+    }
+}
+
+// sortable panel
+.pcui-panel-header {
+    > .pcui-panel-sortable-icon {
+        color: $text-darkest;
+        transition: color 100ms;
+
+        @extend .pcui-flex;
+
+        flex-direction: row;
+        align-items: center;
+        margin: 0 10px 0 0;
+        height: 100%;
+
+        // left border
+        &::before {
+            content: ' ';
+            border-left: 1px solid $bcg-primary;
+            margin-right: 10px;
+            height: calc(100% - 14px);
+            flex-shrink: 0;
+        }
+
+        // dots
+        &::after {
+            content: '.. .. ..';
+            white-space: normal;
+            width: 12px;
+            line-height: 5px;
+            overflow: hidden;
+            height: 24px;
+            font-size: 22px;
+            letter-spacing: 1px;
+            flex-shrink: 0;
+        }
+    }
+}
+
+// hover on sortable
+.pcui-panel:not(.pcui-disabled, .pcui-readonly) {
+    > .pcui-panel-header {
+        > .pcui-panel-sortable-icon:hover {
+            color: $text-primary;
+            cursor: move;
+        }
+    }
+}
+
+// hide left border of sortable icon if panel is not collapsible
+.pcui-panel:not(.pcui-collapsible) {
+    > .pcui-panel-header {
+        > .pcui-panel-sortable-icon::before {
+            display: none;
+        }
+    }
+}
+
+// remove button
+.pcui-panel-remove {
+    align-self: flex-end;
+    order: 100; // always put remove button last
+    &::before {
+        line-height: 30px;
+    }
+}
+
+// hide remove button if readonly
+.pcui-panel.pcui-readonly {
+    .pcui-panel-remove {
+        display: none;
+    }
+}
+
+.pcui-panel-header > .pcui-button {
+    flex-shrink: 0;
+    margin: 1px;
+    background-color: transparent;
+    border: 0;
+}
+
+// disabled panel
+.pcui-panel.pcui-disabled {
+    > .pcui-panel-header {
+        background-color: color.mix($bcg-dark, $bcg-primary, 60%);
+        color: #999;
+    }
+}
+
+.pcui-subpanel {
+    box-sizing: border-box;
+    margin: $element-margin;
+    border: 1px solid $bcg-darker;
+    border-radius: 2px;
+    background-color: $bcg-dark;
+    color: $text-secondary;
+    font-size: 12px;
+
+    .pcui-button {
+        background-color: $bcg-primary;
+        border-color: $bcg-darker;
+
+        &:not(.pcui-disabled, .pcui-readonly) {
+            &:hover,
+            &:focus {
+                background-color: $bcg-primary;
+            }
+
+            &:active {
+                background-color: $bcg-dark;
+            }
+        }
+    }
+}
+
+.pcui-overlay {
+    width: auto;
+    height: auto;
+    inset: 0;
+    z-index: 101;
+    transition: opacity 100ms, visibility 100ms;
+
+    @extend .pcui-flex;
+
+    justify-content: center;
+    align-items: center;
+    position: absolute;
+}
+
+.pcui-overlay-inner {
+    @extend .pcui-no-select;
+
+    position: absolute;
+    width: auto;
+    height: auto;
+    inset: 0;
+    background-color: rgba($bcg-darkest, 0.7);
+}
+
+.pcui-overlay-clickable {
+    > .pcui-overlay-inner {
+        cursor: pointer;
+    }
+}
+
+.pcui-overlay-transparent {
+    > .pcui-overlay-inner {
+        background-color: transparent;
+    }
+}
+
+.pcui-overlay-content {
+    background-color: $bcg-primary;
+    transition: width 100ms, height 100ms, margin-left 100ms, margin-top 100ms;
+    box-shadow: 7px 7px 7px rgb(0 0 0 / 15%);
+}
+
+.pcui-divider {
+    height: 1px;
+    background-color: $bcg-dark;
+    margin: $element-margin 0;
+}
+
+.pcui-infobox {
+    box-sizing: border-box;
+    margin: $element-margin;
+    padding: 2 * $element-margin;
+    border: 1px solid $bcg-darker;
+    border-radius: 2px;
+    background-color: $bcg-dark;
+    color: $text-secondary;
+    font-size: 12px;
+
+    :first-child {
+        color: $text-primary;
+        margin-bottom: 2px;
+    }
+
+    // show icon using data-icon attribute
+    // as the content
+    &[data-icon]:not(.pcui-hidden) {
+        display: grid;
+        grid: auto-flow / min-content 1fr;
+
+        &::before {
+            content: attr(data-icon);
+
+            @extend .font-icon;
+
+            font-weight: 100;
+            font-size: 16px;
+            margin-right: 2 * $element-margin;
+            vertical-align: middle;
+            grid-column: 1;
+            grid-row: 1 / 3;
+        }
+    }
+}
+
+.pcui-select-input {
+    @extend .pcui-flex;
+
+    box-sizing: border-box;
+    margin: $element-margin;
+    border-radius: 2px;
+    min-width: 0; // this prevents the element from overflowing
+}
+
+.pcui-select-input-container-value {
+    @extend .pcui-flex;
+
+    background-color: $bcg-dark;
+    transition: box-shadow 100ms, opacity 100ms;
+}
+
+.pcui-select-input-shadow {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    transition: box-shadow 100ms;
+    border-radius: 2px;
+    pointer-events: none;
+    z-index: 1;
+}
+
+.pcui-select-input-value {
+    &:not(.pcui-hidden) {
+        display: block;
+    }
+
+    margin: 0;
+    padding: 0 24px 0 ($element-margin + 2px);
+    height: 24px;
+    line-height: 24px;
+    font-size: 12px;
+
+    @extend .fixed-font;
+
+    transition: background-color 100ms, color 100ms;
+}
+
+.pcui-label.pcui-select-input-value {
+    margin: 0;
+}
+
+.pcui-select-input-textinput {
+    margin: 0;
+}
+
+.pcui-select-input-textinput:not(.pcui-disabled, .pcui-readonly, .pcui-error) {
+    &.pcui-focus,
+    &:hover {
+        box-shadow: none;
+    }
+}
+
+.pcui-label.pcui-select-input-icon {
+    position: absolute;
+    right: $element-margin;
+    color: $text-darkest;
+    pointer-events: none;
+    transition: color 100ms;
+    margin: 0;
+    height: 24px;
+    line-height: 24px;
+
+    &::after {
+        @extend .font-icon;
+
+        content: '\E159';
+        vertical-align: middle;
+    }
+}
+
+.pcui-select-input-has-disabled-value .pcui-container.pcui-select-input-list .pcui-label.pcui-selected {
+    &::after {
+        font-family: inherit;
+        content: 'fallback';
+        color: $text-primary;
+        font-size: 10px;
+        position: absolute;
+        right: 6px;
+    }
+}
+
+.pcui-label.pcui-select-input-disabled-value {
+    &::after {
+        @extend .font-icon;
+
+        content: '\e133' !important;
+        position: absolute;
+        right: 6px;
+    }
+}
+
+.pcui-select-input.pcui-open {
+    .pcui-select-input-shadow {
+        box-shadow: $element-shadow-hover;
+    }
+
+    .pcui-select-input-value {
+        color: $text-primary;
+        background-color: $bcg-darkest;
+    }
+
+    .pcui-select-input-icon::after {
+        color: $text-primary;
+        content: '\E157';
+    }
+}
+
+.pcui-container.pcui-select-input-list {
+    position: absolute;
+    z-index: 1;
+    top: 100%;
+    width: 100%;
+    max-height: 200px;
+    overflow-y: auto;
+    background-color: $bcg-darker;
+
+    .pcui-label {
+        &:not(.pcui-hidden) {
+            display: block;
+        }
+
+        font-size: 12px;
+
+        @extend .fixed-font;
+
+        height: 22px;
+        line-height: 22px;
+        padding: 0 24px 0 $element-margin;
+        margin: 0;
+
+        &.pcui-selected {
+            color: $text-primary;
+
+            &::after {
+                @extend .font-icon;
+
+                content: '\E133';
+                color: $text-darkest;
+                position: absolute;
+                right: $element-margin;
+            }
+        }
+    }
+}
+
+.pcui-select-input-fit-height {
+    .pcui-select-input-list {
+        top: initial;
+        bottom: 100%;
+    }
+
+    .pcui-select-input-shadow {
+        top: initial;
+        bottom: 0;
+    }
+}
+
+.pcui-select-input-tags:not(.pcui-select-input-tags-empty) {
+    margin-top: 1px;
+    flex-wrap: wrap;
+}
+
+.pcui-select-input-tag {
+    background-color: $bcg-darker;
+    align-items: center;
+    border-radius: 2px;
+    border: 1px solid $border-primary;
+    margin-right: 2px;
+    margin-top: 2px;
+    min-width: 0; // prevents flex overflow
+    height: 18px;
+
+    > * {
+        margin: 0;
+        background-color: transparent;
+        border: 0;
+    }
+
+    > .pcui-label {
+        padding: 0 5px 0 8px;
+
+        @extend .fixed-font;
+    }
+
+    > .pcui-button {
+        padding: 0 5px;
+        height: 18px;
+        line-height: 18px;
+        flex-shrink: 0;
+
+        &:not(.pcui-disabled, .pcui-readonly):hover {
+            box-shadow: none;
+            color: $error-secondary;
+        }
+    }
+}
+
+.pcui-select-input-tag-not-everywhere {
+    > .pcui-label {
+        opacity: 0.5;
+
+        &::before {
+            content: '*';
+            margin-right: 5px;
+        }
+    }
+}
+
+.pcui-select-input:not(.pcui-disabled, .pcui-readonly) {
+    .pcui-select-input-container-value {
+        &:hover {
+            .pcui-select-input-shadow {
+                box-shadow: $element-shadow-hover;
+            }
+
+            .pcui-select-input-icon {
+                color: $text-dark;
+            }
+        }
+    }
+
+    &.pcui-focus {
+        .pcui-select-input-shadow {
+            box-shadow: $element-shadow-hover;
+        }
+
+        .pcui-select-input-icon {
+            color: $text-dark;
+        }
+    }
+
+    .pcui-select-input-value:hover {
+        color: $text-primary;
+        background-color: $bcg-darkest;
+        cursor: pointer;
+    }
+
+    .pcui-select-input-list {
+        > *:hover,
+        > .pcui-select-input-label-highlighted {
+            background-color: $bcg-darkest;
+            color: $text-primary;
+            cursor: pointer;
+        }
+    }
+}
+
+.pcui-select-input-create-new {
+    > .pcui-label {
+        padding-right: $element-margin;
+    }
+
+    > .pcui-label:last-child {
+        flex-shrink: 0;
+        margin-left: auto;
+
+        &::before {
+            content: '\E120';
+
+            @extend .font-icon;
+
+            margin-right: $element-margin;
+        }
+    }
+}
+
+.pcui-select-input.pcui-disabled {
+    opacity: $element-opacity-disabled;
+}
+
+.pcui-select-input {
+    .pcui-label.pcui-disabled {
+        opacity: $element-opacity-disabled;
+    }
+}
+
+.pcui-select-input.pcui-readonly {
+    .pcui-select-input-icon {
+        display: none;
+    }
+
+    &.pcui-select-input-multi {
+        .pcui-select-input-container-value {
+            display: none;
+        }
+
+        .pcui-select-input-tag > .pcui-button {
+            display: none;
+        }
+    }
+
+    &.pcui-select-input-allow-input:not(.pcui-select-input-multi) {
+        opacity: $element-opacity-readonly;
+
+        .pcui-select-input-textinput::after {
+            display: none;
+        }
+    }
+}
+
+@keyframes animation-spin {
+    from {
+        transform: rotate(0deg);
+    }
+
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+.pcui-spinner {
+    display: inline-block;
+    margin: $element-margin;
+    vertical-align: middle;
+
+    > path {
+        animation-name: animation-spin;
+        animation-duration: 750ms;
+        animation-iteration-count: infinite;
+        animation-timing-function: linear;
+        transform-origin: center;
+    }
+
+    &.pcui-error {
+        > path {
+            animation: none;
+            fill: rgba(color.adjust(#f77, $lightness: -17%), 1);
+
+            &.pcui-spinner-highlight {
+                fill: rgba(#f77, 1);
+            }
+        }
+    }
+}
+
+.pcui-progress {
+    height: 4px;
+    background-color: $bcg-darkest;
+    transition: opacity 100ms;
+    width: 100%;
+
+    .pcui-progress-inner {
+        width: 0%;
+        height: inherit;
+
+        $first: rgba($text-active, 1);
+        $second: rgba(color.adjust($text-active, $lightness: -17%), 1);
+
+        background: $text-active;
+        background:
+            linear-gradient(
+                135deg,
+                $first 0%,
+                $first 25%,
+                $second 26%,
+                $second 50%,
+                $first 51%,
+                $first 75%,
+                $second 76%,
+                $second 100%
+            );
+        background-position: 0 0;
+        background-size: 24px 24px;
+        background-repeat: repeat;
+
+        // animate
+        animation: pcui-progress-background 1000ms linear infinite;
+    }
+}
+
+.pcui-progress.pcui-error {
+    .pcui-progress-inner {
+        $first: rgba(#f77, 1);
+        $second: rgba(color.adjust(#f77, $lightness: -17%), 1);
+
+        background: $text-active;
+        background:
+            linear-gradient(
+                135deg,
+                $first 0%,
+                $first 25%,
+                $second 26%,
+                $second 50%,
+                $first 51%,
+                $first 75%,
+                $second 76%,
+                $second 100%
+            );
+        background-position: 0 0;
+        background-size: 24px 24px;
+        background-repeat: repeat;
+        animation: none;
+    }
+}
+
+// ui-progress animation
+@keyframes pcui-progress-background {
+    from { background-position: 0 0; }
+    to { background-position: 24px 0; }
+}
+
+.pcui-treeview {
+    @extend .pcui-no-select;
+
+    // make sure our width covers the largest visible tree item child
+    // this does not work on Edge
+    min-width: max-content;
+}
+
+.pcui-treeview-item {
+    position: relative;
+    padding-left: 24px;
+
+    // top line
+    &::before {
+        content: '\00a0';
+        position: absolute;
+        background-color: color.mix($bcg-dark, $bcg-primary, 50%);
+        width: 2px;
+        left: 14px;
+        top: -12px;
+        bottom: 12px;
+    }
+
+    // top line, last item
+    &:last-child::before {
+        height: 25px;
+        bottom: auto;
+    }
+}
+
+.pcui-treeview-item.pcui-disabled {
+    > .pcui-treeview-item-contents {
+        > .pcui-treeview-item-text {
+            opacity: $disabled-opacity;
+        }
+    }
+}
+
+.pcui-treeview-item-contents {
+    position: relative;
+    color: $text-secondary;
+    margin-left: 3px;
+    border: 1px solid transparent;
+    align-items: center;
+    height: 24px;
+    box-sizing: border-box;
+
+    &:hover {
+        cursor: pointer;
+        color: $text-primary;
+        background-color: $bcg-dark;
+
+        > .pcui-treeview-item-icon {
+            color: $text-primary;
+        }
+    }
+}
+
+.pcui-treeview-item-icon {
+    color: $text-darkest;
+    margin: 0 2px 0 0;
+    flex-shrink: 0;
+
+    &::before {
+        content: '\00a0';
+        position: absolute;
+        background-color: color.mix($bcg-dark, $bcg-primary, 50%);
+        left: -12px;
+        top: 10px;
+        width: 24px;
+        height: 2px;
+    }
+
+    &::after {
+        content: attr(data-icon);
+
+        @extend .font-icon;
+
+        display: inline-block;
+        vertical-align: sub;
+        width: 22px;
+        height: 22px;
+        position: relative;
+        z-index: 1;
+        text-align: center;
+    }
+}
+
+.pcui-treeview-item-text {
+    margin: 0;
+    flex-shrink: 0;
+    position: relative;
+    z-index: 1;
+    transition: opacity 100ms;
+    padding-right: 8px;
+    color: inherit;
+}
+
+.pcui-treeview-item-contents.pcui-treeview-item-selected {
+    background-color: $bcg-darkest;
+    color: $text-primary;
+
+    > .pcui-treeview-item-icon {
+        color: $text-primary;
+    }
+}
+
+.pcui-treeview-item:not(.pcui-treeview-item-empty) {
+    > .pcui-treeview-item-contents::before {
+        content: '\E120';
+
+        @extend .font-icon;
+
+        position: absolute;
+        font-size: 10px;
+        font-weight: bold;
+        text-align: center;
+        color: $text-secondary;
+        background-color: $bcg-dark;
+        top: 0;
+        left: -24px;
+        width: 16px;
+        height: 16px;
+        line-height: 16px;
+        margin: 3px;
+        cursor: pointer;
+        z-index: 1;
+    }
+
+    &.pcui-treeview-item-open {
+        > .pcui-treeview-item-contents::before {
+            content: '\E121';
+        }
+    }
+}
+
+.pcui-treeview:not(.pcui-treeview-filtering) {
+    .pcui-treeview-item:not(.pcui-treeview-item-open, .pcui-treeview-item-empty) {
+        > .pcui-treeview-item {
+            display: none;
+        }
+    }
+}
+
+.pcui-treeview-item-dragged > .pcui-treeview-item-contents {
+    background-color: rgba($bcg-dark, 0.5);
+    color: $text-primary;
+}
+
+.pcui-treeview-drag-handle {
+    position: fixed;
+    width: 32px;
+    height: 20px;
+    top: 0;
+    bottom: 0;
+    z-index: 4;
+    margin-top: -1px;
+    margin-left: -1px;
+
+    &.before {
+        border-top: 4px solid $text-active;
+        padding-right: 8px;
+        height: 24px;
+    }
+
+    &.inside {
+        border: 4px solid $text-active;
+    }
+
+    &.after {
+        border-bottom: 4px solid $text-active;
+        padding-right: 8px;
+        height: 24px;
+    }
+}
+
+.pcui-treeview-item-contents::after {
+    content: ' ';
+    display: block;
+    clear: both;
+}
+
+.pcui-treeview-item.pcui-treeview-item-rename {
+    > .pcui-treeview-item-contents {
+        > .pcui-treeview-item-text {
+            display: none;
+        }
+
+        > .pcui-text-input {
+            margin: 0;
+            flex-grow: 1;
+            box-shadow: none !important;
+            border: 0;
+            background-color: transparent;
+
+            > input {
+                font-family: inherit;
+                font-size: 14px;
+                padding: 0;
+            }
+        }
+    }
+}
+
+.pcui-treeview.pcui-treeview-filtering {
+    // > .pcui-treeview-item {
+    //     display: none;
+    // }
+    .pcui-treeview-item {
+        padding-left: 0;
+
+        &::before {
+            display: none;
+        }
+
+        &:not(.pcui-treeview-filtering-result) {
+            > .pcui-treeview-item-contents {
+                display: none;
+            }
+        }
+    }
+
+    .pcui-treeview-item-contents {
+        margin-left: 0;
+    }
+}
+
+.pcui-treeview-filtering-result {
+    .pcui-treeview-item-contents::before,
+    .pcui-treeview-item-icon::before {
+        display: none;
+    }
+}
+
+.pcui-label-group {
+    @extend .pcui-flex;
+
+    align-items: center;
+    flex-flow: row nowrap;
+    margin: $element-margin;
+
+    // set width for label and don't let it shrink
+    > .pcui-label:first-child {
+        width: 100px;
+        flex-shrink: 0;
+        margin: 0;
+    }
+
+    // remove top margin from sub elements
+    > .pcui-element:not(:first-child) {
+        margin: 0 0 0 $element-margin;
+    }
+
+    // field should be stretched
+    // except for ones marked
+    // as specifically not flexible
+    > .pcui-element:nth-child(2) {
+        &:not(.pcui-not-flexible) {
+            flex: 1;
+        }
+    }
+
+    // remove top/bottom margin from vector fields
+    > .pcui-vector-input {
+        > .pcui-numeric-input {
+            margin-top: 0;
+            margin-bottom: 0;
+        }
+    }
+}
+
+.pcui-label-group-align-top {
+    > .pcui-label:first-child {
+        align-self: flex-start;
+        margin-top: 4px;
+    }
+}
+
+.pcui-label-group.pcui-disabled {
+    > .pcui-label:first-child {
+        opacity: $element-opacity-disabled;
+    }
+}
+
+.pcui-gridview {
+    @extend .pcui-flex;
+
+    flex-flow: row wrap;
+    align-content: flex-start;
+}
+
+.pcui-gridview-vertical {
+    @extend .pcui-flex;
+
+    flex-direction: column;
+    align-content: flex-start;
+}
+
+// Gridview Regular Item
+.pcui-gridview-item {
+    @extend .pcui-flex;
+
+    box-sizing: border-box;
+    justify-content: center;
+    align-items: center;
+    flex-shrink: 0;
+    width: 104px;
+
+    &:not(.pcui-disabled) {
+        cursor: pointer;
+
+        &:not(.pcui-gridview-item-selected, .pcui-gridview-radiobtn, .pcui-gridview-radiobtn-selected):hover {
+            background-color: $bcg-darker;
+        }
+    }
+}
+
+.pcui-gridview-item-selected {
+    background-color: $bcg-darkest;
+}
+
+.pcui-gridview-item-text {
+    max-width: 100px;
+    font-size: 12px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    margin: 0;
+    padding: 0 2px;
+}
+
+// GridView Radio Buttons
+.pcui-gridview-radio-container {
+    @extend .pcui-flex;
+
+    box-sizing: border-box;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    flex-shrink: 0;
+    width: 104px;
+
+    :not(.pcui-disabled) {
+        cursor: pointer;
+    }
+}
+
+.pcui-menu {
+    position: absolute;
+    z-index: 401;
+    inset: 0;
+    width: auto;
+    height: auto;
+}
+
+.pcui-menu-items {
+    position: fixed;
+    top: 0;
+    left: 0;
+}
+
+.pcui-menu-item {
+    position: relative;
+    background-color: $bcg-darkest;
+    width: auto;
+}
+
+.pcui-menu-item-children {
+    box-shadow: 0 0 8px rgb(0 0 0 / 60%);
+    position: absolute;
+    z-index: 1;
+    left: 100%;
+    top: 0;
+    opacity: 0;
+    transition: opacity 100ms, visibility 100ms;
+    visibility: hidden;
+}
+
+.pcui-menu-item:hover {
+    > .pcui-menu-item-children {
+        opacity: 1;
+        visibility: visible;
+    }
+}
+
+.pcui-menu-item-content {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    min-width: 158px;
+    color: $text-dark;
+    border-bottom: 1px solid color.mix($bcg-darkest, $bcg-dark, 50%);
+    cursor: pointer;
+
+    &:hover {
+        color: $text-primary;
+        background-color: $text-darkest;
+    }
+
+    > .pcui-label {
+        transition: none;
+    }
+}
+
+.pcui-menu-item:last-child {
+    > .pcui-menu-item-content {
+        border-bottom: none;
+    }
+}
+
+// Text label - use inline-flex to properly align icon and text
+.pcui-menu-item-content > .pcui-label:not(.pcui-menu-item-shortcut) {
+    display: inline-flex;
+    align-items: center;
+    color: inherit;
+
+    &[data-icon]::before {
+        content: attr(data-icon);
+
+        @extend .font-icon;
+
+        font-weight: 100;
+        margin-right: $element-margin;
+    }
+}
+
+// Submenu arrow for items with children
+.pcui-menu-item-has-children {
+    & > .pcui-menu-item-content > .pcui-label:not(.pcui-menu-item-shortcut)::after {
+        content: '\E160';
+
+        @extend .font-icon;
+
+        position: absolute;
+        right: $element-margin;
+    }
+
+    & > .pcui-menu-item-content > .pcui-label:not(.pcui-menu-item-shortcut) {
+        padding-right: 32px;
+    }
+}
+
+// Shortcut label - push to right with auto margin
+.pcui-menu-item-shortcut {
+    margin-left: auto;
+    color: inherit;
+
+    &:not(:empty) {
+        padding-left: 16px;
+    }
+}
+
+.pcui-menu-item.pcui-disabled {
+    .pcui-menu-item-content {
+        cursor: default;
+
+        &:hover {
+            color: $text-dark;
+            background-color: transparent;
+        }
+
+        & > .pcui-label {
+            cursor: default;
+            opacity: $disabled-opacity;
+        }
+    }
+}
+
+// radio button
+.pcui-radio-button {
+    display: inline-block;
+    position: relative;
+    background-color: $bcg-darker;
+    color: #fff;
+    width: 17px;
+    height: 17px;
+    border-radius: 50%;
+    overflow: hidden;
+    margin: $element-margin;
+    transition: opacity 100ms, background-color 100ms, box-shadow 100ms;
+
+    // outer ring
+    &::before {
+        content: '';
+        position: absolute;
+        display: block;
+        left: 50%;
+        top: 50%;
+        width: 16px;
+        min-width: 16px;
+        height: 16px;
+        transform: translate(-50%, -50%);
+        border-radius: 50%;
+        background-color: $bcg-darker;
+    }
+
+    // inner circle (hidden in initial state)
+    &::after {
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        width: 11px;
+        min-width: 11px;
+        height: 11px;
+        transform: translate(-50%, -50%);
+        border-radius: 50%;
+        background-color: white;
+    }
+}
+
+// selected
+.pcui-radio-button-selected {
+    // outer ring
+    &::before {
+        width: 16px;
+        min-width: 16px;
+        height: 16px;
+        box-sizing: border-box;
+        border: 1px solid white;
+    }
+
+    // inner circle
+    &::after {
+        content: '';
+        display: block;
+    }
+}
+
+// readonly
+.pcui-radio-button.pcui-readonly {
+    opacity: $element-opacity-readonly;
+}
+
+// disabled state
+.pcui-radio-button.pcui-disabled {
+    opacity: $element-opacity-disabled;
+}
+
+// hover
+.pcui-radio-button:not(.pcui-disabled, .pcui-readonly) {
+    &:hover {
+        cursor: pointer;
+
+        &::before {
+            background-color: $bcg-darkest;
+        }
+    }
+}
+
+.pcui-array-input {
+    margin: $element-margin;
+    min-width: 0; // this prevents the element from overflowing
+
+    > .pcui-numeric-input {
+        margin: 0 0 $element-margin;
+    }
+}
+
+.pcui-array-input.pcui-array-empty {
+    > .pcui-numeric-input {
+        margin: 0;
+    }
+}
+
+.pcui-array-input-item {
+    > * {
+        margin-top: 1px;
+        margin-bottom: 1px;
+    }
+
+    // field should be stretched
+    // except for ones marked
+    // as specifically not flexible
+    // and panel headers
+    > *:first-child {
+        &:not(.pcui-not-flexible, .pcui-panel-header) {
+            flex: 1;
+        }
+    }
+
+    > .pcui-button {
+        margin-left: - calc($element-margin / 2);
+        margin-right: 0;
+        background-color: transparent;
+        border: 0;
+    }
+}
+
+.pcui-array-input-item-asset {
+    > .pcui-button {
+        margin-top: 36px;
+    }
+}
+
+.pcui-array-input.pcui-readonly {
+    .pcui-array-input-item-delete {
+        display: none;
+    }
+}
+
+