/* Video-call mark, fill-less so consumers colour it via a mask — the Zoom button plus the meeting
   card label and lesson/curriculum chips (admin + public). Global so any of them can reach it. */
:root {
  --glyph-zoom: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M4%205.5A1.5%201.5%200%200%200%202.5%207v10A1.5%201.5%200%200%200%204%2018.5h10a1.5%201.5%200%200%200%201.5-1.5v-2.2l4.3%203.1a.8.8%200%200%200%201.2-.7V6.8a.8.8%200%200%200-1.2-.7L15.5%209.2V7A1.5%201.5%200%200%200%2014%205.5H4z'/%3E%3C/svg%3E");
}

@layer components {
  /* A .btn that reads as Zoom — its brand blue plus a video-call glyph. Used on the public
     "join the Zoom session" link. */
  .btn--zoom {
    --btn-bg: var(--color-zoom);
    --btn-border: var(--color-zoom);
    --btn-color: oklch(1 0 0);
  }

  /* The glyph is a decorative ::before, drawn as a mask over the button's own colour — CSS, so
     it survives Action Text's content sanitizer and needs no markup. */
  .btn--zoom::before {
    content: "";
    inline-size: 1.15em;
    block-size: 1.15em;
    flex: none;
    background-color: currentColor;
    -webkit-mask: var(--glyph-zoom) center / contain no-repeat;
    mask: var(--glyph-zoom) center / contain no-repeat;
  }
}