/*
  Reusable photographic paper material.

  Use <section class="paper" data-edges="top-bottom">…</section>.
  The element keeps its normal-flow height. Its two pseudo-elements carry the
  fibre field and alpha frame, so direct children remain semantic content.
*/

.paper {
  --paper-edge: 24px;
  --paper-outset: 16px;
  --paper-core: #f4f1e9;
  /* The frame extends outward by --paper-outset. Its inner seam is therefore
     edge minus outset inside the element. Overlap that seam by 1px while
     keeping the rectangular core away from transparent outer corners. */
  --paper-core-inset: max(0px, calc(var(--paper-edge) - var(--paper-outset) - 1px));
  --paper-edge-top: 0px;
  --paper-edge-right: 0px;
  --paper-edge-bottom: var(--paper-edge);
  --paper-edge-left: 0px;
  --paper-outset-top: 0px;
  --paper-outset-right: 0px;
  --paper-outset-bottom: var(--paper-outset);
  --paper-outset-left: 0px;
  --paper-core-top: 0px;
  --paper-core-right: 0px;
  --paper-core-bottom: var(--paper-core-inset);
  --paper-core-left: 0px;
  position: relative;
  z-index: 1;
  isolation: isolate;
  background: transparent;
}

.paper::before,
.paper::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.paper::before {
  /* The core deliberately sits over the inner portion of the frame. This
     covers nine-slice interpolation joins while --paper-core-inset preserves
     the source frame's alpha-only corner and outer-edge region. */
  z-index: 1;
  inset: var(--paper-core-top) var(--paper-core-right) var(--paper-core-bottom)
    var(--paper-core-left);
  background-color: var(--paper-core);
  background-image: image-set(
    url("assets/paper/paper-fibre-mirrored-512.svg") 1x,
    url("assets/paper/paper-fibre-mirrored-1024.svg") 2x
  );
  /* Each mirrored SVG contains four 512 CSS-pixel fibre quadrants. */
  background-size: 1024px 1024px;
  background-repeat: repeat;
}

.paper::after {
  z-index: 0;
  inset: 0;
  border-style: solid;
  border-color: transparent;
  border-width: var(--paper-edge-top) var(--paper-edge-right)
    var(--paper-edge-bottom) var(--paper-edge-left);
  border-image-source: url("assets/paper/paper-edge-frame.webp");
  border-image-slice: 112 120 112 104;
  border-image-width: var(--paper-edge-top) var(--paper-edge-right)
    var(--paper-edge-bottom) var(--paper-edge-left);
  border-image-outset: var(--paper-outset-top) var(--paper-outset-right)
    var(--paper-outset-bottom) var(--paper-outset-left);
  border-image-repeat: stretch;
}

.paper > * {
  position: relative;
  z-index: 2;
}

/* The lower ripped edge is mandatory for every paper component. */
/* Bottom edge only. */
.paper[data-edges="bottom"] {
  --paper-edge-bottom: var(--paper-edge);
  --paper-outset-bottom: var(--paper-outset);
  --paper-core-bottom: var(--paper-core-inset);
}

/* Horizontal edges only. Side border widths stay at zero, so no side strip or
   corner asset is painted. */
.paper[data-edges="top-bottom"] {
  --paper-edge-top: var(--paper-edge);
  --paper-edge-bottom: var(--paper-edge);
  --paper-outset-top: var(--paper-outset);
  --paper-outset-bottom: var(--paper-outset);
  --paper-core-top: var(--paper-core-inset);
  --paper-core-bottom: var(--paper-core-inset);
}

/* Right and bottom edges. */
.paper[data-edges="right-bottom"] {
  --paper-edge-right: var(--paper-edge);
  --paper-edge-bottom: var(--paper-edge);
  --paper-outset-right: var(--paper-outset);
  --paper-outset-bottom: var(--paper-outset);
  --paper-core-right: var(--paper-core-inset);
  --paper-core-bottom: var(--paper-core-inset);
}

/* Top, right and bottom edges. */
.paper[data-edges="top-right-bottom"] {
  --paper-edge-top: var(--paper-edge);
  --paper-edge-right: var(--paper-edge);
  --paper-edge-bottom: var(--paper-edge);
  --paper-outset-top: var(--paper-outset);
  --paper-outset-right: var(--paper-outset);
  --paper-outset-bottom: var(--paper-outset);
  --paper-core-top: var(--paper-core-inset);
  --paper-core-right: var(--paper-core-inset);
  --paper-core-bottom: var(--paper-core-inset);
}

/* All four alpha-framed edges. The inset core is the important distinction
   from a full rectangular background: the source's transparent outside and
   translucent contact edge reveal whatever stage sits below this element. */
.paper[data-edges="all"] {
  --paper-edge-top: var(--paper-edge);
  --paper-edge-right: var(--paper-edge);
  --paper-edge-bottom: var(--paper-edge);
  --paper-edge-left: var(--paper-edge);
  --paper-outset-top: var(--paper-outset);
  --paper-outset-right: var(--paper-outset);
  --paper-outset-bottom: var(--paper-outset);
  --paper-outset-left: var(--paper-outset);
  --paper-core-top: var(--paper-core-inset);
  --paper-core-right: var(--paper-core-inset);
  --paper-core-bottom: var(--paper-core-inset);
  --paper-core-left: var(--paper-core-inset);
}

@media (max-width: 32rem) {
  .paper {
    --paper-edge: 18px;
    --paper-outset: 12px;
  }
}