/* attach.js — minimaal CSS voor de attached panels.
 *
 * Pijltjes (optioneel): zet `--mm-arrow-color` op je panel en je krijgt
 * automatisch een pijltje boven of onder, afhankelijk van data-attached-side.
 * --arrow-offset wordt door attach.js geset op de horizontale pixel-positie
 * waar de pijl moet komen (relatief aan het panel).
 */

[data-attached-side] {
  --mm-arrow-color: var(--surface, #1e293b);
  --mm-arrow-size: 6px;
}

[data-attached-side="bottom"]::before,
[data-attached-side="top"]::after {
  content: '';
  position: absolute;
  left: var(--arrow-offset, 50%);
  width: 0;
  height: 0;
  border: var(--mm-arrow-size) solid transparent;
  transform: translateX(-50%);
  pointer-events: none;
}

[data-attached-side="bottom"]::before {
  bottom: 100%;
  border-bottom-color: var(--mm-arrow-color);
}

[data-attached-side="top"]::after {
  top: 100%;
  border-top-color: var(--mm-arrow-color);
}