/**
 * @file
 * Shared "no media selected" hatch treatment for IXM Blocks image/icon slots.
 * Components supply their own sizing; this class only supplies the fill.
 */
/* Also styles bootstrap_components' carousel and card placeholders, layered
   from here since that module can't depend on ixm_blocks. */
.ixm-media-placeholder,
.carousel-item .carousel-item-placeholder,
.card .card-img-placeholder {
  --ixm-placeholder-stripe-a: var(--bs-secondary-bg, #e9ecef);

  /* Derived from theme tokens, not a fixed gray, so it adapts to any palette. */
  --ixm-placeholder-tint: var(--theme-color-primary, var(--bs-primary, #6c757d));
  --ixm-placeholder-gradient: conic-gradient(from 210deg at 62% 58%, color-mix(in srgb, var(--ixm-placeholder-tint) 30%, var(--ixm-placeholder-stripe-a)) 0deg, color-mix(in srgb, var(--ixm-placeholder-tint) 55%, var(--theme-color-ink, var(--bs-body-color, #212529))) 90deg, color-mix(in srgb, var(--ixm-placeholder-tint) 20%, var(--theme-color-surface, var(--bs-body-bg, #fff))) 180deg, color-mix(in srgb, var(--ixm-placeholder-tint) 45%, var(--theme-color-border, var(--bs-border-color, #dee2e6))) 260deg, color-mix(in srgb, var(--ixm-placeholder-tint) 30%, var(--ixm-placeholder-stripe-a)) 360deg);

  /* Fine film-grain texture. */
  --ixm-placeholder-tooth-angle: 114deg;
  --ixm-placeholder-tooth-period: 2.5px;
  --ixm-placeholder-tooth-light: rgb(255, 255, 255, 0.05);
  --ixm-placeholder-tooth-dark: rgb(0, 0, 0, 0.035);

  /* Highlight + vignette so an empty slot reads like a real photo. */
  --ixm-placeholder-sheen: radial-gradient(128% 96% at 50% 6%, rgb(255, 255, 255, 0.1) 0%, transparent 42%);
  --ixm-placeholder-vignette: radial-gradient(140% 110% at 50% 100%, transparent 46%, rgb(0, 0, 0, 0.3) 100%);

  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: repeating-linear-gradient(var(--ixm-placeholder-tooth-angle), var(--ixm-placeholder-tooth-light) 0 1px, var(--ixm-placeholder-tooth-dark) 1px var(--ixm-placeholder-tooth-period)), var(--ixm-placeholder-sheen), var(--ixm-placeholder-vignette), var(--ixm-placeholder-gradient);
}

/* Restores absolute-fill inside a Bootstrap .ratio box, where our
   position: relative above would otherwise collapse it to 0 height. */
.carousel-item .carousel-item-placeholder {
  position: absolute;
  inset: 0;
}