/* bookvelt-icon global styles. Icons rendered through the <x-bookvelt-icon /> component
   (or sbIcon() JS helper) as masked <span>s — color inherits from the
   parent's text color, so `color: #fff` on a parent gives a white icon.
   Flags bypass the mask and render as <img> (see bookvelt-icon.blade.php / bookvelt-icon.js). */

.bookvelt-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  -webkit-mask-image: var(--bookvelt-icon-src);
          mask-image: var(--bookvelt-icon-src);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
  vertical-align: -0.125em;
  flex-shrink: 0;
  line-height: 1;
}

/* Tailwind-like utility sizes for common call sites. */
.bookvelt-icon.w-3, .bookvelt-icon.h-3 { width: 12px; height: 12px; }
.bookvelt-icon.w-4, .bookvelt-icon.h-4 { width: 16px; height: 16px; }
.bookvelt-icon.w-5, .bookvelt-icon.h-5 { width: 20px; height: 20px; }
.bookvelt-icon.w-6, .bookvelt-icon.h-6 { width: 24px; height: 24px; }
.bookvelt-icon.w-8, .bookvelt-icon.h-8 { width: 32px; height: 32px; }