@layer components {

  /* Workspace tabs (houses/_workspaces), centred in the 3D view's top row. */
  .workspaces {
    grid-column: 2;
    display: flex;
    gap: 2px;
    padding: 3px;
    background: color-mix(in oklch, var(--color-surface) 90%, transparent);
    border: 1px solid var(--color-edge);
    border-radius: 8px;
    backdrop-filter: blur(6px);
  }

  .workspaces__tab {
    padding: 5px 12px;
    font-size: 13px;
    color: var(--color-ink-muted);
    background: transparent;
    border: 0;
    border-radius: 5px;

    &:hover:not(:disabled) {
      color: var(--color-ink);
      background: color-mix(in oklch, var(--color-surface), var(--color-ink) 10%);
    }

    &[aria-selected="true"] {
      color: var(--color-on-primary);
      background: var(--color-primary);
    }
  }
}