/**
 * @file
 * The map frame, shared by every canvas_map component.
 *
 * Styles the wrapper from templates/map-frame.html.twig and the fill states
 * from templates/canvas-map-iframe.html.twig.
 *
 * These selectors are public API, covered by the backwards-compatibility
 * promise. Themes and third-party providers bind to them, and a renamed
 * selector fails without an error.
 *
 * - .canvas-map: the wrapper.
 * - .canvas-map--aspect-<value>: one per aspect enum value.
 * - .canvas-map__frame and .canvas-map__placeholder: the two fill states. A
 *   provider that is not iframe-shaped carries .canvas-map__frame or sets
 *   width: 100%; height: 100% itself.
 * - --canvas-map-radius: the corner radius.
 *
 * The 200px minimum comes from the Google Maps Embed API, which does not
 * render below 200px in either dimension. In a narrow container it takes
 * precedence over the aspect ratio.
 *
 * The box is on the wrapper because the iframe is not always what fills it.
 * The declined placeholder and a consent manager's placeholder occupy the
 * same space, so accepting consent does not shift the page.
 *
 * Define --neutral-200 in a theme to color the placeholder background.
 */

.canvas-map {
  /* Clips the iframe to the border radius. */
  overflow: hidden;
  min-width: 200px;
  /* Where the 200px minimum height exceeds what the ratio allows,
     aspect-ratio derives the width from that height and the box grows wider
     than its container: a 21:9 map does this below 467px. The cap keeps the
     box inside. Below 200px of container width, min-width still wins and the
     map overflows by the difference. */
  max-width: 100%;
  min-height: 200px;
  border-radius: var(--canvas-map-radius, 0);
  /* Visible while the iframe loads and behind a consent placeholder. */
  background-color: var(--neutral-200, #f0f0f0);
}

/* One rule per aspect enum value in both components, as dash tokens; see
   docs/architecture.md, "Enum values are near-permanent schema commitments".
   A value without a rule renders an unconstrained box. With no aspect class,
   the 200px minimum height keeps the fill states, which are height: 100%,
   from collapsing. */
.canvas-map--aspect-21-9 {
  aspect-ratio: 21 / 9;
}

.canvas-map--aspect-16-9 {
  aspect-ratio: 16 / 9;
}

.canvas-map--aspect-3-2 {
  aspect-ratio: 3 / 2;
}

.canvas-map--aspect-4-3 {
  aspect-ratio: 4 / 3;
}

.canvas-map--aspect-1-1 {
  aspect-ratio: 1 / 1;
}

.canvas-map--aspect-4-5 {
  aspect-ratio: 4 / 5;
}

.canvas-map--aspect-9-16 {
  aspect-ratio: 9 / 16;
}

/* The live iframe and the placeholder a declining provider renders. */
.canvas-map__frame,
.canvas-map__placeholder {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}