/**
 * <WidgetMock /> styles.
 *
 * The widget atoms themselves (.w, .w-mail, .w-calendar, .w-files,
 * .w-decks, .w-rss, .w-jira, .w-video, .w-upload, .w-werkvoorraad,
 * .w-launcher, .w-subgrid, .w-graph-bar / .w-graph-line / .w-graph-donut)
 * live in AppMock/AppMock.module.css under the `.am` parent scope.
 * They were authored there because LaunchPad variants render dashboard
 * grids full of them. WidgetMock standalonises a single widget:
 * same atoms, new chrome.
 *
 * To get both rule sets, every WidgetMock instance wraps content in
 * <div className={[styles.am, styles.wm].join(' ')}>. The static
 * kit page uses <div class="am wm"> for the same effect.
 *
 * The .wm parent here is `display: contents` so the wrapper doesn't
 * affect layout. .wmFrame is the container that gives the widget its
 * native dashboard background (cobalt-900) and a shadow, so it reads
 * as a tile lifted off the page.
 */

.am.wm { display: contents; }

.am .wmFigure {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  align-items: flex-start;
}

.am .wmFrame {
  background: var(--c-cobalt-900);
  border-radius: var(--radius-md);
  padding: 12px;
  box-shadow: 0 8px 24px -10px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
}

/* Widget sizes. The .w block inside fills the frame. */
.am .wmFrame.wm-size-sm { width: 220px; aspect-ratio: 5 / 4; }
.am .wmFrame.wm-size-md { width: 300px; aspect-ratio: 5 / 4; }
.am .wmFrame.wm-size-lg { width: 380px; aspect-ratio: 5 / 4; }

/* The widget atom (.w) inside should fill the frame and not have its
   own outer shadow, since wmFrame already provides one. */
.am .wmFrame > .w {
  flex: 1;
  min-height: 0;
  height: 100%;
}

.am .wmCaption {
  font-family: var(--conduction-typography-font-family-code);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-cobalt-400);
  margin: 0;
}