/* Shape dividers — the CONSUMER of the divider variables.
 *
 * Everything here is driven by `--r-shpt-*` / `--r-shpb-*` custom properties
 * emitted by the layout widget's Style-tab controls through the ordinary
 * `selectors` pipeline (see Ractro_Widget_Layout_Base::shape_tab), exactly the
 * way assets/css/ractro-layout.css consumes `--r-*`. That is what makes the
 * canvas and the front end agree structurally: one stylesheet, both surfaces —
 * the front end enqueues it from the layout widgets' get_style_depends(), and
 * the editor inlines the same FILE into its shadow root through
 * Ractro_Widget_Manager::get_widgets_css().
 *
 * There is deliberately NO per-shape rule in this file. A shape is a variable
 * (`--r-shape-<key>`, published by Ractro_Shapes), so adding a shape never
 * touches CSS and a shape can never exist here and not there.
 *
 * The divider is a MASKED COLOURED BOX, not an <svg>: a data URI cannot be
 * recoloured, and the Colour control has to work.
 */

/* Only an element that actually HAS a divider becomes a containing block. This
 * class is emitted by render() only when a divider is configured, so no element
 * is positioned by accident. It is a single class (0,1,0), so an author's own
 * Position from the Advanced tab — compiled into the page stylesheet, which
 * loads after this file — still wins. */
.ractro-has-shape {
  position: relative;
}

.ractro-shape {
  position: absolute;
  left: 50%;
  /* Width is a percentage of the element ("Scale"), centred, so scaling past
     100% grows it evenly off both edges instead of only to the right. */
  width: var(--r-shp-w, 100%);
  pointer-events: none;
  line-height: 0;
  /* REPEAT-X, ALWAYS — including at the default tile count of 1, where one tile
     is 100% wide and there is nothing left to repeat, so this is byte-identical
     to the `no-repeat` it replaces. Making it conditional would mean a second
     variable and a rule that only some elements get.

     TILED FROM THE LEFT, not from the centre: at `mask-position: center` an even
     tile count puts a seam down the middle of the element and leaves half a tile
     at each end. From the origin, N tiles of width 100%/N fill the box exactly,
     which is what makes Repeat an exact count at every element width. At N=1
     the two are the same position. */
  -webkit-mask-repeat: repeat-x;
          mask-repeat: repeat-x;
  -webkit-mask-position: 0 0;
          mask-position: 0 0;
}

.ractro-shape--top {
  top: 0;
  height: var(--r-shpt-h, 60px);
  width: var(--r-shpt-w, 100%);
  background-color: var(--r-shpt-color, currentColor);
  -webkit-mask-image: var(--r-shpt);
          mask-image: var(--r-shpt);
  /* z-index 0 by default puts the divider in the same stacking level as any
     positioned child; the node is rendered FIRST, so content paints over it.
     "Above content" raises it. */
  z-index: var(--r-shpt-z, 0);
  opacity: var(--r-shpt-o, 1);
  /* The mask's HEIGHT is the node's height; only its width is divided, so
     Repeat multiplies the crests without flattening them. */
  -webkit-mask-size: calc(100% / var(--r-shpt-tile, 1)) 100%;
          mask-size: calc(100% / var(--r-shpt-tile, 1)) 100%;
  /* Offset is applied BEFORE the scales in the list, so it is measured in the
     element's own axes and is not multiplied by Flip or Invert. Positive moves
     the divider down, i.e. INTO the section — see the bottom edge, which negates
     it so "into the section" means the same thing at both edges. */
  transform: translateX(-50%) translateY(var(--r-shpt-y, 0px)) scaleX(var(--r-shpt-fx, 1)) scaleY(var(--r-shpt-fy, 1));
}

.ractro-shape--bottom {
  bottom: 0;
  height: var(--r-shpb-h, 60px);
  width: var(--r-shpb-w, 100%);
  background-color: var(--r-shpb-color, currentColor);
  -webkit-mask-image: var(--r-shpb);
          mask-image: var(--r-shpb);
  z-index: var(--r-shpb-z, 0);
  opacity: var(--r-shpb-o, 1);
  -webkit-mask-size: calc(100% / var(--r-shpb-tile, 1)) 100%;
          mask-size: calc(100% / var(--r-shpb-tile, 1)) 100%;
  /* Edge shapes are all authored flush to the TOP of their viewBox, so the
     bottom edge is the same asset mirrored vertically — the -1 here. The
     Invert control multiplies into it, so Invert on the bottom edge means
     "back the other way" rather than "the same as the top".
     Offset is negated for the same reason the scale is not: a positive Offset
     has to mean "into the section" on BOTH edges, or the control reverses
     meaning halfway down the panel. */
  transform: translateX(-50%) translateY(calc(-1 * var(--r-shpb-y, 0px))) scaleX(var(--r-shpb-fx, 1)) scaleY(calc(-1 * var(--r-shpb-fy, 1)));
}