/* Storybook Cloud on screen: the folder import's sheet (js/folderimport.js) and the progress chip
   that stays on screen while it runs. Tokens from app.css. */

.fi-count { margin: 4px 0 10px; font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; }
.fi-bar { height: 8px; border-radius: 4px; background: var(--chip, #f2f2f5); overflow: hidden; margin: 0 0 14px; }
.fi-bar i { display: block; height: 100%; width: 0; background: var(--accent, #ffcf24); transition: width .4s ease; }
.fi-errors { margin: 0 0 12px; font-size: 13.5px; color: var(--muted, #6e6e76); }
.fi-errors ul { margin: 6px 0 0; padding-left: 18px; max-height: 160px; overflow-y: auto; word-break: break-all; }

.import-chip {
  position: fixed; z-index: 45; left: 50%; transform: translateX(-50%);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 150px); max-width: calc(100vw - 32px);   /* (clear of the shutter and the tabs) */
  border: 0; border-radius: 999px; padding: 10px 16px; min-height: 44px;
  background: var(--fg, #121214); color: var(--bg, #fff); font: inherit; font-size: 14px; font-weight: 700;
  font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .25); cursor: pointer;
}