/* Area styles: electro. Only what the shared components (components.css) cannot
   express. Use the tokens from tokens.css — never a literal colour. */

/* A frame drawn as a row of slots, each with the insert's icon. */
.frame {
  display: inline-flex; gap: 2px; flex: none;
  padding: 3px; border-radius: 8px;
  border: 1.5px solid var(--line-strong); background: var(--surface);
}

.frame__slot {
  width: 22px; height: 22px; border-radius: 5px;
  display: grid; place-items: center;
  background: var(--surface-sunken); color: var(--ink-2);
}

.frame__slot .icon { width: 15px; height: 15px; }
.frame__slot--empty { background: transparent; box-shadow: inset 0 0 0 1px var(--line); }

.electro-editor__preview {
  display: grid; place-items: center; padding: var(--sp-3) 0;
}

.electro-editor__preview .frame { padding: 5px; gap: 4px; border-radius: 12px; }
.electro-editor__preview .frame__slot { width: 44px; height: 44px; border-radius: 8px; }
.electro-editor__preview .frame__slot .icon { width: 26px; height: 26px; }

.electro-presets { margin: 0; padding: 0; flex-wrap: wrap; overflow: visible; }
.electro-presets .chip { padding: 0 var(--sp-2); }