/*
 * The drawings for gifts without a photo (app/views/gift_drawings). Colours
 * come from the theme: the picture's classes pick the paper (--pc) and ribbon
 * (--rc) from theme.css, so they change with Ameixa/Vinho and light/dark.
 */
.drawing-patterns { position: absolute; width: 0; height: 0; overflow: hidden; }

.gift-picture.drawn {
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--pc) 22%, var(--paper)), color-mix(in srgb, var(--pc) 9%, var(--paper)) 70%);
}
.gift-drawing { width: 78%; height: auto; max-width: 180px; overflow: visible; }

.paper-accent { --pc: var(--accent); }
.paper-second { --pc: var(--second); }
.paper-fourth { --pc: var(--fourth); }
.paper-fifth { --pc: var(--fifth); }
.paper-sixth { --pc: var(--sixth); }
.paper-ribbon { --pc: var(--ribbon); }
.ribbon-gold { --rc: var(--ribbon); }
.ribbon-white { --rc: rgba(255, 255, 255, .92); }
.ribbon-accent { --rc: var(--accent); }

.gift-drawing {
  .paper { fill: var(--pc); }
  .paper-dark { fill: color-mix(in srgb, var(--pc) 76%, #000000); }
  .paper-light { fill: color-mix(in srgb, var(--pc) 82%, #FFFFFF); }
  .rib { fill: var(--rc); }
  .rib-dark { fill: color-mix(in srgb, var(--rc) 72%, #000000); }
  .rib-line { fill: none; stroke: var(--rc); stroke-width: 4; stroke-linecap: round; }
  .tissue { fill: color-mix(in srgb, var(--rc) 35%, #FFFFFF); stroke: color-mix(in srgb, var(--rc) 55%, #FFFFFF); stroke-width: .8; stroke-linejoin: round; }
  .white { fill: rgba(255, 255, 255, .95); }
  .shadow { fill: rgba(0, 0, 0, .14); }
  .spark { fill: var(--ribbon); }
  .faint { opacity: .55; }
  .ink { fill: rgba(0, 0, 0, .6); }
  .leaf { fill: #3FA36B; }
  .leaf-dark { fill: #2E7D57; }
  .screen { fill: color-mix(in srgb, var(--rc) 35%, #FFFFFF); }
  .stroke-paper { fill: none; stroke: color-mix(in srgb, var(--pc) 76%, #000000); stroke-width: 7; stroke-linecap: round; }
  .stroke-paper.thin { stroke-width: 5; }
  .stroke-white { fill: none; stroke: rgba(255, 255, 255, .92); stroke-width: 2.5; stroke-linecap: round; }
  .stroke-white.dashed { stroke-dasharray: 3 4; }
  .stroke-ink { fill: none; stroke: rgba(0, 0, 0, .6); stroke-width: 2.2; stroke-linecap: round; }
  .steam { fill: none; stroke: color-mix(in srgb, var(--pc) 55%, transparent); stroke-width: 2.5; stroke-linecap: round; }
}

/* The development-only preview (/dev/drawings) */
.app .drawing-preview { display: grid; gap: 10px; }
.app .drawing-preview small { color: var(--muted); font-size: 12px; }
.app .drawing-preview .gift-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 560px) { .app .drawing-preview .gift-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }