button, input, select, textarea { font: inherit; }
button { cursor: pointer; }

.topbar {
  height: var(--toolbar-height);
  background: #17202a;
  color: #fff;
  border-bottom: 1px solid #0d141b;
}

.brand { min-width: 220px; }
.brand span:not(.brand-mark) { color: #9ca8b5; }

.brand-mark {
  width: 30px;
  height: 30px;
  background: #19a879;
  color: #fff;
  font-weight: 800;
  border-radius: 4px;
}

.name-input {
  width: min(280px, 25vw);
  height: 34px;
  padding: 0 10px;
  color: #fff;
  background: #263340;
  border: 1px solid #3a4856;
  border-radius: 4px;
}

.button {
  height: 34px;
  padding: 0 13px;
  border: 1px solid transparent;
  border-radius: 4px;
}

.button.primary { background: var(--accent); color: #fff; }
.button.primary:hover { background: var(--accent-hover); }
.button.secondary { background: #263340; color: #fff; border-color: #4b5967; }
.button:disabled { cursor: not-allowed; opacity: 0.45; }

.workspace {
  --sidebar-width: 310px;
  --component-inspector-width: 300px;
  height: calc(100% - var(--toolbar-height));
  grid-template-columns: minmax(0, var(--sidebar-width)) 8px minmax(0, 1fr) 8px minmax(0, var(--component-inspector-width));
}

.sidebar {
  background: var(--panel);
}

.sidebar-resizer {
  position: relative;
  z-index: 3;
  width: 8px;
  cursor: col-resize;
  touch-action: none;
  outline: none;
  background: #f7f9fa;
}
.sidebar-resizer::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 3px;
  width: 1px;
  background: var(--border);
  transition: width 120ms ease, background-color 120ms ease;
}
.sidebar-resizer:hover::after,
.sidebar-resizer:focus-visible::after,
.workspace.is-resizing-sidebar .sidebar-resizer::after {
  width: 2px;
  background: var(--accent);
}
.workspace.is-resizing-sidebar,
.workspace.is-resizing-sidebar * { cursor: col-resize; }
.workspace.is-resizing-sidebar iframe { pointer-events: none; }

.component-inspector-resizer { transform: scaleX(-1); }
.workspace.is-resizing-component-inspector,
.workspace.is-resizing-component-inspector * { cursor: col-resize; }
.workspace.is-resizing-component-inspector iframe { pointer-events: none; }