/* Door styles: how a closed door looks. Used by the calendar (.leaf) and the organiser's look preview
   (.lp-door). A closed door is ".face" with a ".deco" of three shapes and its number in ".fn"; the container
   says which style with data-door-style. Flat shapes in the theme's own colours (themes.css). */

.face .deco { display: none; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; overflow: hidden; }
.face .deco i { position: absolute; display: block; }
.face .fn { position: relative; z-index: 1; }
[data-door-style='panel'] .face .deco,
[data-door-style='present'] .face .deco,
[data-door-style='envelope'] .face .deco { display: block; }

/* Panelled doors: an arched door with two inset panels and a number plaque */
[data-door-style='panel'] .face { border-radius: 46% 46% 10px 10px / 20% 20% 10px 10px; }
[data-door-style='panel'] .face .deco i:nth-child(1) {
  left: 17%; right: 17%; top: 11%; height: 34%;
  border: 2px solid color-mix(in srgb, var(--door-edge) 80%, transparent); border-radius: 999px 999px 6px 6px / 70% 70% 6px 6px;
}
[data-door-style='panel'] .face .deco i:nth-child(2) {
  left: 17%; right: 17%; top: 53%; bottom: 9%;
  border: 2px solid color-mix(in srgb, var(--door-edge) 80%, transparent); border-radius: 6px;
}
[data-door-style='panel'] .face .fn {
  transform: scale(.78); padding: .12em .45em; border-radius: .3em; background: var(--door); border: 2px solid var(--door-edge);
}

/* Presents: wrapped gifts with a ribbon cross, a bow and the number on a gift tag */
[data-door-style='present'] .face { border-radius: 8px; }
[data-door-style='present'] .face::after { display: none; }
[data-door-style='present'] .face .deco i:nth-child(1) { top: 0; bottom: 0; left: 43%; width: 14%; background: var(--ribbon, var(--accent)); }
[data-door-style='present'] .face .deco i:nth-child(2) { left: 0; right: 0; top: 46%; height: 10%; background: var(--ribbon, var(--accent)); }
/* The bow: two ribbon loops and a knot, sitting on the vertical ribbon */
[data-door-style='present'] .face .deco i:nth-child(3) {
  top: 6%; left: 50%; height: 15%; aspect-ratio: 3.2 / 1; transform: translateX(-50%);
  background: radial-gradient(circle at 50% 78%, var(--ribbon, var(--accent)) 0 12%, transparent 13%);
}
[data-door-style='present'] .face .deco i:nth-child(3)::before,
[data-door-style='present'] .face .deco i:nth-child(3)::after {
  content: ''; position: absolute; top: 8%; width: 44%; height: 84%; box-sizing: border-box;
  border: 4px solid var(--ribbon, var(--accent)); border-radius: 60% 60% 45% 45%;
}
[data-door-style='present'] .face .deco i:nth-child(3)::before { left: 4%; transform: rotate(-24deg); }
[data-door-style='present'] .face .deco i:nth-child(3)::after { right: 4%; transform: rotate(24deg); }
[data-door-style='present'] .face .fn {
  padding: .15em .5em; border-radius: .25em; transform: rotate(-6deg) scale(.66);
  background: var(--door); color: var(--door-ink); border: 1.5px solid var(--door-edge); box-shadow: 0 2px 6px rgb(0 0 0 / .15);
}

/* Envelopes: a sealed letter with its flap folded down and the number on a wax seal */
[data-door-style='envelope'] .face { border-radius: 6px; }
[data-door-style='envelope'] .face::after { display: none; }
[data-door-style='envelope'] .face .deco i:nth-child(1) {
  left: 0; right: 0; top: 0; height: 55%; clip-path: polygon(0 0, 100% 0, 50% 100%);
  background: color-mix(in srgb, var(--door-edge) 35%, var(--door));
}
[data-door-style='envelope'] .face .deco i:nth-child(2) {
  left: 0; right: 0; bottom: 0; height: 50%;
  background:
    linear-gradient(to top right, transparent calc(50% - 1px), color-mix(in srgb, var(--door-edge) 70%, transparent) 50%, transparent calc(50% + 1px)),
    linear-gradient(to top left, transparent calc(50% - 1px), color-mix(in srgb, var(--door-edge) 70%, transparent) 50%, transparent calc(50% + 1px));
}
[data-door-style='envelope'] .face .fn {
  transform: scale(.6); width: 2em; height: 2em; border-radius: 50%; display: grid; place-items: center; margin-top: 8%;
  background: var(--ribbon, var(--accent)); color: var(--ribbon-ink, var(--accent-ink)); box-shadow: 0 0 0 .14em color-mix(in srgb, var(--ribbon, var(--accent)) 35%, transparent), 0 2px 6px rgb(0 0 0 / .2);
}

/* Mixed colours: doors take turns between the theme's own look (mix-0) and three more paper and ribbon
   combinations that suit it. Not for Classic doors. --door is the paper, --ribbon the ribbon or seal. */
[data-door-style]:not([data-door-style='classic']) .face[class*='mix-'] { background: var(--door); border-color: var(--door-edge); color: var(--door-ink); }

[data-theme='winter'] .face.mix-1 { --door: #1f4a3d; --ribbon: #d9a441; --ribbon-ink: #1b2421; --door-edge: #d9a441; --door-ink: #f6efe2; }
[data-theme='winter'] .face.mix-2 { --door: #b63a2e; --ribbon: #f8f1e4; --ribbon-ink: #8f2a20; --door-edge: #8f2a20; --door-ink: #fff; }
[data-theme='winter'] .face.mix-3 { --door: #c8a77e; --ribbon: #d8473a; --ribbon-ink: #fff; --door-edge: #a8865c; --door-ink: #3b2a1c; }

[data-theme='cosmic'] .face.mix-1 { --door: #2b2350; --ribbon: #c9d2e8; --ribbon-ink: #0b1026; --door-edge: #8d86c9; --door-ink: #eef1ff; }
[data-theme='cosmic'] .face.mix-2 { --door: #0f5f63; --ribbon: #0b1026; --ribbon-ink: #eef1ff; --door-edge: #3fd0c9; --door-ink: #eef1ff; }
[data-theme='cosmic'] .face.mix-3 { --door: #3a4478; --ribbon: #f2b84b; --ribbon-ink: #1a1405; --door-edge: #f2b84b; --door-ink: #eef1ff; }

[data-theme='spooky'] .face.mix-1 { --door: #3a1f3d; --ribbon: #9ccc3a; --ribbon-ink: #14200a; --door-edge: #9ccc3a; --door-ink: #f3e6d6; }
[data-theme='spooky'] .face.mix-2 { --door: #d9661f; --ribbon: #17110f; --ribbon-ink: #f3c9a0; --door-edge: #9b4512; --door-ink: #1a0d05; }
[data-theme='spooky'] .face.mix-3 { --door: #4a3b2f; --ribbon: #f3c9a0; --ribbon-ink: #2b1f1a; --door-edge: #f3c9a0; --door-ink: #f3e6d6; }

[data-theme='sweetheart'] .face.mix-1 { --door: #c43c5c; --ribbon: #fffafb; --ribbon-ink: #c43c5c; --door-edge: #9e2c47; --door-ink: #fff; }
[data-theme='sweetheart'] .face.mix-2 { --door: #ffffff; --ribbon: #b3123a; --ribbon-ink: #fff; --door-edge: #e9b3c0; --door-ink: #b3123a; }
[data-theme='sweetheart'] .face.mix-3 { --door: #e9b3c0; --ribbon: #7a2340; --ribbon-ink: #fff; --door-edge: #c98696; --door-ink: #3b1f27; }

/* Plain: built from the calendar's own colour */
[data-theme='plain'] .face.mix-1 { --door: color-mix(in srgb, var(--accent) 14%, #fffaf2); --door-edge: color-mix(in srgb, var(--accent) 45%, #fffaf2); }
[data-theme='plain'] .face.mix-2 { --door: var(--accent); --door-ink: var(--accent-ink); --door-edge: color-mix(in srgb, var(--accent) 70%, #000); --ribbon: #fffaf2; --ribbon-ink: #2a221d; }
[data-theme='plain'] .face.mix-3 { --door: #c8a77e; --door-edge: #a8865c; --door-ink: #3b2a1c; }