/* =====================================================================
   COMPONENT STYLES: <bk-spot-field>
   ===================================================================== */

/* ---- field: fills the nearest positioned parent, behind content ---- */
.bk-spot-field--field { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.bk-spot-field--field svg { width: 100%; height: 100%; }

/* ---- rule: a thin strip of flecks used between sections ----------- */
.bk-spot-field--rule { display: block; height: 28px; overflow: hidden; }
.bk-spot-field--rule svg { width: 100%; height: 100%; }

/* ---- badge: round coat swatch ------------------------------------- */
.bk-spot-field--badge {
  display: block; aspect-ratio: 1; border-radius: 50%; overflow: hidden;
  background: #fbf6ec; box-shadow: inset 0 0 0 1px var(--bk-line), inset 0 -10px 18px rgba(42, 33, 28, 0.08);
}
.bk-spot-field--badge svg { width: 100%; height: 100%; }