/*
 * De printer op het scherm.
 *
 * Staat los van site.css omdat ook de voorbeeldwinkel hem gebruikt, en die
 * heeft zijn eigen kleuren. Vandaar de terugvalwaarden bij elke variabele: waar
 * de naam niet bestaat pakt hij een kleur die het overal doet.
 *
 * Een printer, met papier dat eruit rolt.
 *
 * Bewust geen foto van een apparaat: dat wordt een plaatje van een merk dat
 * niet van ons is. Een strakke vorm met een gleuf leest als printer zonder er
 * een na te doen.
 */
.dp { display: flex; flex-direction: column; align-items: center; }

.dp-kast {
  width: min(20rem, 100%); height: 3.4rem;
  border-radius: .9rem .9rem .35rem .35rem;
  background: linear-gradient(180deg,
              color-mix(in srgb, var(--inkt, #16191b) 82%, transparent),
              color-mix(in srgb, var(--inkt, #16191b) 92%, transparent));
  display: grid; place-items: end center;
  box-shadow: 0 .4rem 1.2rem rgb(0 0 0 / .25);
  position: relative; z-index: 2;
}
.dp-gleuf {
  width: 82%; height: .34rem; margin-bottom: .45rem;
  border-radius: .2rem;
  background: color-mix(in srgb, var(--papier, #ffffff) 22%, #000);
  box-shadow: inset 0 .12rem .2rem rgb(0 0 0 / .6);
}

/*
 * Het papier zit vast onder de gleuf en groeit naar beneden.
 *
 * De uitvoer is met opzet een gewoon blok en geen flexvak: als flexitem krijgt
 * het papier zijn hoogte van de regel in plaats van van zijn inhoud, en dan
 * blijft het op nul staan hoe hoog de bon ook is.
 */
.dp-uitvoer { width: min(20rem, 100%); }
/*
 * Het vak heeft de hoogte van de bon; het beeld schuift erin naar beneden.
 * Zo hoeft er niets aan de opmaak te veranderen terwijl het beweegt.
 */
.dp-papier {
  width: 88%; margin: 0 auto;
  position: relative;
  overflow: hidden;
  background: #fff;
  border-radius: 0 0 .2rem .2rem;
  box-shadow: 0 .5rem 1.4rem rgb(0 0 0 / .22);
}
.dp-papier img { display: block; width: 100%; height: auto; }

/*
 * Een bon die eraf kan.
 *
 * De stippellijn zit bij de gleuf: daar zat hij vast en daar scheurt hij. Het
 * handje erbij is de hele uitleg -- wie een bon ziet hangen met een grijphandje
 * erop probeert er vanzelf aan te trekken.
 */
.dp-papier.teScheuren,
.dp-papier.tePakken { cursor: grab; touch-action: manipulation; }
.dp-papier.teScheuren:active,
.dp-papier.tePakken:active { cursor: grabbing; }

/* De scheurlijn hoort bij een rol, niet bij een label. */
.dp-papier.teScheuren::after {
  content: ""; position: absolute; left: 4%; right: 4%; top: 4px;
  border-top: 1px dashed rgb(0 0 0 / .35);
  pointer-events: none;
}
.dp--omhoog .dp-papier.teScheuren::after { top: auto; bottom: 4px; }

@media (prefers-reduced-motion: reduce) {
  .dp-papier.teScheuren { transition: none !important; }
}
/*
 * Tijdens het printen hangt de bon aan de onderrand van het vak: dat is de
 * voorkant van het vel, en die beweegt van de gleuf weg. Zodra hij helemaal
 * buiten is zet het script dit weer terug naar de gewone opmaak.
 */
.dp-papier img[style*="absolute"] { left: 0; bottom: 0; }
.dp--omhoog .dp-papier img[style*="absolute"] { bottom: auto; top: 0; }

.dp-stand {
  margin: .9rem 0 0; font-size: .82rem; color: var(--vaag, var(--zacht, #6b7280));
  min-height: 1.2em;
}

/*
 * Dezelfde printer, ondersteboven.
 *
 * column-reverse zet de kast onderaan en het papier erboven; verder hoeft er
 * niets te veranderen. Het papiervak groeit nog steeds, alleen duwt het nu naar
 * boven omdat het paneel eronder vastzit. De bon schuift dus omhoog en wat er
 * net gedrukt is blijft bij de gleuf staan -- precies wat je bij een echte
 * printer ziet.
 */
.dp--omhoog { flex-direction: column-reverse; }
.dp--omhoog .dp-kast {
  border-radius: .35rem .35rem .9rem .9rem;
  place-items: start center;
  box-shadow: 0 -.4rem 1.2rem rgb(0 0 0 / .25);
}
.dp--omhoog .dp-gleuf { margin-bottom: 0; margin-top: .45rem; }
.dp--omhoog .dp-papier {
  border-radius: .2rem .2rem 0 0;
  box-shadow: 0 -.5rem 1.4rem rgb(0 0 0 / .22);
}
.dp--omhoog .dp-stand { margin: 0 0 .9rem; }

@media (prefers-reduced-motion: reduce) {
  .dp-papier { transition: none !important; }
}

/*
 * Een printer die uit staat.
 *
 * Niet weghalen maar dimmen: dat hij er staat en niet meedoet is precies wat we
 * willen laten zien. Een lege plek zegt dat niet.
 */
.dp--uit { opacity: .45; }
.dp--uit .dp-kast { box-shadow: none; }

.dp-stand.dp-fout { color: var(--stuk, #b0322a); font-weight: 500; }


/* ------------------------------------------------------- de labelprinter */

/*
 * Een labelprinter is geen bonprinter.
 *
 * Bij een bon loopt er een rol doorheen die je afscheurt; bij een label komt er
 * een uitgestanst vel uit dat je van de gomrand pelt. Dat zijn twee andere
 * apparaten met twee andere gebaren, en ze allebei tekenen als "kast met een
 * gleuf" is precies het soort detail waar iemand die die printers dagelijks
 * gebruikt op afhaakt.
 *
 * Wat er verandert: de kast is dieper en vierkanter, en het label heeft ronde
 * hoeken zoals elk uitgestanst label. Verder geen scheurlijn en geen zaagtand.
 */
.dp--label .dp-kast {
  height: 4.6rem;
  border-radius: .7rem .7rem .3rem .3rem;
  background: linear-gradient(180deg,
              color-mix(in srgb, var(--inkt, #16191b) 74%, transparent),
              color-mix(in srgb, var(--inkt, #16191b) 90%, transparent));
}

/* Een streep over de kast: het deksel waar de rol onder zit. */
.dp--label .dp-kast::before {
  content: ""; position: absolute; left: 12%; right: 12%; top: 32%;
  border-top: 1px solid rgb(255 255 255 / .1);
}

.dp--label .dp-gleuf { width: 70%; }

.dp--label .dp-papier {
  width: 82%;
  border-radius: .35rem;
  box-shadow: 0 .35rem 1rem rgb(0 0 0 / .2);
}