@charset "UTF-8";
/* GPLv3 license
FAS - Callout Film strip
Author: ElsaTam (Kapirklaa in Discord)
*/
.callout[data-callout=film-strip] {
  --callout-icon: lucide-film;
  --callout-padding: 0;
  --callout-content-padding: 0;
  --callout-color: var(--mono-rgb-100);
  --image-shadow-offset: 0;
  --frame-height: 140px;
  --n-holes: 8;
  --hole-width: 15px;
  --hole-height: 10px;
  --gap: 5px;
  --img-fading: 2px;
  --hole-fading: 1px;
  --frame-width: calc(var(--n-holes) * var(--hole-width) + (var(--n-holes) - 1) * var(--gap));
  --padding-y: calc(var(--hole-height) + 3 * var(--gap));
  --padding-x: calc(var(--gap) * 0.5);
  background: none;
}
.callout[data-callout=film-strip] .callout-content > p {
  counter-reset: frames;
  display: flex;
  flex-wrap: nowrap;
  font-size: 0;
  margin: 0;
}
.callout[data-callout=film-strip] .callout-content > p > br {
  display: none;
}
.callout[data-callout=film-strip] .callout-content > p > span {
  margin-inline: -0.5px;
  position: relative;
  height: calc(var(--frame-height) + var(--padding-y) * 2);
  width: calc(var(--frame-width) + var(--padding-x) * 2);
  counter-increment: frames;
  min-width: calc(var(--frame-width) + var(--padding-x) * 2);
  background-color: rgb(var(--mono-rgb-100));
  padding: var(--padding-y) var(--padding-x);
  -webkit-mask-image: linear-gradient(to right, transparent 0px, transparent calc(var(--hole-width) * 0.5 - var(--hole-fading) * 0.5), black calc(var(--hole-width) * 0.5 + var(--hole-fading) * 0.5), black calc(var(--hole-width) * 0.5 + var(--gap) - var(--hole-fading) * 0.5), transparent calc(var(--hole-width) * 0.5 + var(--gap) + var(--hole-fading) * 0.5), transparent calc(var(--hole-width) + var(--gap))), linear-gradient(to bottom, black, black calc(2 * var(--gap) - var(--hole-fading) * 0.5), transparent calc(2 * var(--gap) + var(--hole-fading) * 0.5), transparent calc(2 * var(--gap) + var(--hole-height) - var(--hole-fading) * 0.5), black calc(2 * var(--gap) + var(--hole-height) + var(--hole-fading) * 0.5), black calc(var(--padding-y) + var(--frame-height) + var(--gap) - var(--hole-fading) * 0.5), transparent calc(var(--padding-y) + var(--frame-height) + var(--gap) + var(--hole-fading) * 0.5), transparent calc(var(--padding-y) + var(--frame-height) + var(--gap) + var(--hole-height) - var(--hole-fading) * 0.5), black calc(var(--padding-y) + var(--frame-height) + var(--gap) + var(--hole-height) + var(--hole-fading) * 0.5), black 100%);
  -webkit-mask-size: calc(var(--hole-width) + var(--gap)) 100%, 100%;
  -webkit-mask-position: left, center;
  -webkit-mask-repeat: repeat-x, no-repeat;
}
.callout[data-callout=film-strip] img {
  width: 1000%;
  height: 100%;
  object-fit: cover;
  filter: sepia(0.5);
  -webkit-mask-image: linear-gradient(to right, transparent 0px, black var(--img-fading), black calc(100% - var(--img-fading)), transparent 100%), linear-gradient(to bottom, transparent 0px, black var(--img-fading), black calc(100% - var(--img-fading)), transparent 100%);
  -webkit-mask-size: 100%;
  -webkit-mask-position: center;
  mask-composite: intersect;
  -webkit-mask-composite: source-in;
}
.callout[data-callout=film-strip] .callout-content > p > span::after {
  content: "← " counter(frames) " →";
  font-size: calc(var(--gap) * 2 - 2px);
  line-height: 1;
  color: rgb(var(--mono-rgb-0));
  opacity: 0.7;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 1px;
  text-align: center;
  z-index: 1;
}
.callout[data-callout=film-strip] .callout-content > p > span:first-of-type::after {
  content: counter(frames) " →";
}
.callout[data-callout=film-strip] .callout-content > p > span:last-of-type::after {
  content: "← " counter(frames);
}

/* Fix for Minimal theme and img-grid cssclass */
.callout[data-callout=film-strip] .callout-content > p {
  display: flex !important;
  gap: 0;
}
