:not(:defined) {
    visibility: hidden;
}

:root {
    touch-action: none;
    height: 100%;
    --asset-max-width: 120px;

    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

#inspector-body sl-tree-item::part(label),
#inspector-body sl-tree-item {
    display: block !important;
    width: 100%;
}

html {
    width: 100%;
    height: 100%;
}

body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: var(--sl-color-neutral-0);
    font-family: var(--sl-font-sans);

    background: var(--sl-color-neutral-0);
}

#layout-root {
    flex: 1;
    min-height: 0;
    /* background: #17191d; */
    background: var(--sl-color-neutral-0);
}

#layout-host {
    width: 100%;
    height: 100%;
}

#layout-templates {
    display: none;
}

canvas {
    position: absolute;
}

#run-button::part(base) {
    filter: brightness(1.75);
}

#loading-dialog::part(close-button__base) {
    display: none;
}

sl-icon,
sl-icon-button {
    font-size: var(--sl-font-size-large);
}

sl-menu {
    padding: var(--sl-spacing-x-small);
}

sl-menu-label::part(base) {
    font-size: var(--sl-font-size-medium);
}

sl-menu-item::part(base) {
    transition: background var(--sl-transition-x-fast) ease;
    border-radius: var(--sl-border-radius-small);
}

sl-tree-item.no-caret::part(expand-button) {
    display: none;
}

sl-color-picker::part(trigger) {
    margin-top: 4px;
}

sl-details::part(content) {
    padding-top: var(--sl-spacing-2x-small);
}

sl-details::part(header) {
    padding-top: var(--sl-spacing-x-small);
    padding-bottom: var(--sl-spacing-x-small);
}

.danger-background::part(base):hover {
    background-color: var(--sl-color-danger-50);
}

.danger-label::part(label) {
    color: var(--sl-color-danger-600);
}

.danger-prefix::part(prefix) {
    color: var(--sl-color-danger-600);
}

.shortcut {
    display: inline-block;
    width: 50px;
    text-align: left;
    opacity: 0.6;
}

#create-object-button::part(base),
#assets-back-button::part(base) {
    padding: 0;
}

/* .lm_goldenlayout {
    background: #17191d;
} */

/* .lm_header {
    background: linear-gradient(180deg, #2d3239 0%, #23272d 100%);
} */

/* .lm_tab {
    background: #25292f;
    color: #d9dde5;
} */

/* .lm_tab.lm_active {
    background: #16191e;
    color: #ffffff;
} */

section.lm_tabs > div.lm_tab.lm_active.lm_focused {
    background: #242428;
    color: #fff;
}

.lm_content {
    /* background: #111317; */
    background: var(--sl-color-neutral-0);
    border: 1px solid #2f343c;
    border-top: none;
}

/* .lm_splitter {
    background: #1f2329;
} */

/* .lm_splitter:hover,
.lm_drag_handle {
    background: #8f6f1e;
} */

.lm_controls .lm_close,
.lm_header .lm_tab .lm_close_tab {
    display: none !important;
}

.panel-content {
    width: 100%;
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    /* background: #121419; */
    color: #fafaff;
}

.floating-panel-action {
    position: absolute;
    top: var(--sl-spacing-x-small);
    right: var(--sl-spacing-x-small);
    z-index: 2;
    border-radius: 999px;
    backdrop-filter: blur(4px);
    background: color-mix(in srgb, var(--sl-color-neutral-0) 82%, transparent);
}

.panel-body {
    position: relative;
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: var(--sl-spacing-x-small);
}

.hierarchy-panel-body {
    overflow: hidden;
}

.hierarchy-panel-body sl-tree {
    width: 100%;
    height: 100%;
    overflow: auto;
}

.inspector-panel-body {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.viewport-panel {
    padding: 1px;
}

#root {
    position: relative;
    width: 100%;
    height: 100%;
    display: block;
    border-radius: var(--sl-border-radius-medium);
    touch-action: none;
}

#assets-window {
    display: flex;
    flex-direction: column;
}

#assets-grid {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    gap: var(--sl-spacing-medium);
}

#assets-grid .asset-card {
    flex: 0 1 var(--asset-max-width);
    max-width: var(--asset-max-width);
    min-width: 120px;
}

.asset-card {
    aspect-ratio: 1;
    flex: 1;
    min-width: 120px;
    height: 120px;
    cursor: pointer;
    display: flex;
    flex-shrink: 0;
}

.asset-card-inner {
    width: 100%;
    height: 100%;
    aspect-ratio: 1;
}

.asset-card-inner::part(body) {
    width: 100%;
    height: 100%;
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 12px;
    background: #1a1a1e;
    border: 1px solid #2d3440;
    box-sizing: border-box;
    transition: 0.15s;
}

.asset-card-inner::part(body):hover {
    background: #242830;
    border-color: #3b4554;
}

.asset-icon {
    font-size: 58px;
    color: #8da0bd;
    margin-bottom: 8px;
}

.asset-name {
    font-size: 14px;
    color: #e2e5ec;
    text-align: center;
    word-break: break-word;
    user-select: none;
}

#inspector-body {
    width: 100%;
}

#inspector-body sl-tree-item::part(label),
#inspector-body sl-tree-item {
    display: block !important;
    width: 100%;
}

#add-component-button {
    display: none;
    width: 50%;
    margin-top: var(--sl-spacing-small);
    font-size: var(--sl-font-size-large);
}

.inspector-field {
    display: flex;
    align-items: center;
}

.inspector-label {
    flex: 0 0 auto;
    margin-left: var(--sl-spacing-small);
    margin-right: var(--sl-spacing-x-small);
    text-align: left;
    left: 0;
    font-weight: 500;
    cursor: pointer;
}

.inspector-field sl-input {
    flex: 1;
    min-width: 10px !important;
}

.app-toolbar {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: var(--sl-spacing-2x-small);
    background: var(--sl-color-background-secondary);
    color: var(--sl-color-text);
    border-bottom: 1px solid var(--sl-color-border);
    font-family: var(--sl-font-sans);
    user-select: none;
}

.toolbar-left,
.toolbar-right {
    position: absolute;
    top: 0;
    height: 100%;
    display: flex;
    align-items: center;
    gap: var(--sl-spacing-large);
}

.toolbar-left {
    left: var(--sl-spacing-x-small);
}

.toolbar-right {
    right: var(--sl-spacing-x-small);
}

.toolbar-center {
    display: flex;
    align-items: center;
}

.app-title {
    font-weight: var(--sl-font-weight-semibold);
    color: var(--sl-color-text);
    opacity: 0.85;
    font-size: var(--sl-font-size-large);
}

table {
    width: 100%;
    border-collapse: collapse;
}

table sl-checkbox {
    display: flex;
    justify-self: center;
}

th,
td {
    border: 1px solid var(--sl-color-neutral-500);
    padding: 10px;
    text-align: left;
}

th {
    background-color: var(--sl-color-neutral-300);
}

tr:nth-child(even) {
    background-color: var(--sl-color-neutral-100);
}

tr:hover {
    background-color: var(--sl-color-neutral-200);
}

.dropzone {
    padding: 12px;
    border: 2px dashed #555;
    border-radius: var(--sl-color-neutral-50);
    text-align: center;
    cursor: pointer;
    user-select: none;
}

.dropzone.drag-over {
    border-color: #4da3ff;
    background: rgba(77, 163, 255, 0.1);
}

.drop-value {
    font-size: 0.9rem;
    opacity: 0.8;
}

fieldset {
    margin: 8px 0;
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    background: linear-gradient(145deg, #232326, #1a1a1d);
}

legend {
    padding: 0 8px;
    color: #f5f5f5;
    font-weight: 600;
    font-size: 1rem;
    text-transform: uppercase;
}

.code-editor-panel {
    background: #1e1e1e;
}

.code-editor-panel #code-editor-container {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.code-editor-panel .monaco-editor {
    padding-top: 4px;
}

.lm_dropTargetIndicator {
    z-index: 1000;
}

.lm_dragProxy {
    z-index: 1000;
}