/* Gray Muzzle callout boxes
 * Source of truth: silverpaw/wordpress/callouts/gm-callouts.css
 * Icons: Tabler Icons (MIT), inlined as CSS masks.
 * Markup: <aside class="gm-callout gm-callout--TYPE" role="note">
 *           <p class="gm-callout__title">Title</p>
 *           <p>Body text</p>
 *         </aside>
 */

aside.gm-callout {
  --gm-bg: #F1EFE8;
  --gm-bar: #5F5E5A;
  --gm-title: #444441;
  --gm-text: #2C2C2A;
  --gm-icon: none;
  display: block;
  margin: 1.75em 0;
  padding: 1em 1.25em;
  background: var(--gm-bg);
  border: 0;
  border-left: 5px solid var(--gm-bar);
  border-radius: 0;
  color: var(--gm-text);
  font-style: normal;
  line-height: 1.65;
  box-shadow: none;
}

aside.gm-callout p,
aside.gm-callout ul,
aside.gm-callout ol {
  margin: 0 0 0.6em;
  color: inherit;
}

aside.gm-callout > :last-child {
  margin-bottom: 0;
}

aside.gm-callout ul,
aside.gm-callout ol {
  padding-left: 1.25em;
}

aside.gm-callout li {
  margin-bottom: 0.25em;
}

aside.gm-callout a {
  color: var(--gm-title);
  text-decoration: underline;
}

aside.gm-callout strong {
  color: var(--gm-title);
}

aside.gm-callout .gm-callout__title {
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin: 0 0 0.4em;
  color: var(--gm-title);
  font-weight: 700;
  line-height: 1.3;
}

aside.gm-callout .gm-callout__title::before {
  content: "";
  flex: 0 0 auto;
  width: 1.3em;
  height: 1.3em;
  background-color: currentColor;
  -webkit-mask: var(--gm-icon) no-repeat center / contain;
  mask: var(--gm-icon) no-repeat center / contain;
}

/* By the numbers: the big figure */
aside.gm-callout .gm-callout__number {
  margin: 0.1em 0 0.15em;
  color: var(--gm-text);
  font-size: 2em;
  font-weight: 700;
  line-height: 1.15;
}

/* What the research says: source line */
aside.gm-callout .gm-callout__source {
  margin-top: 0.5em;
  color: var(--gm-bar);
  font-size: 0.8em;
}

/* Myth vs fact labels */
aside.gm-callout .gm-callout__myth,
aside.gm-callout .gm-callout__fact {
  font-weight: 700;
}

aside.gm-callout .gm-callout__myth {
  color: #993C1D;
}

aside.gm-callout .gm-callout__fact {
  color: #3B6D11;
}

@media (max-width: 600px) {
  aside.gm-callout {
    margin: 1.5em 0;
    padding: 0.9em 1em;
  }
}

/* ---- Box types ---- */

/* Call your vet if */
aside.gm-callout--vet {
  --gm-bg: #FCEBEB;
  --gm-bar: #A32D2D;
  --gm-title: #791F1F;
  --gm-text: #501313;
  --gm-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M8 8v-2a2 2 0 0 1 2 -2h4a2 2 0 0 1 2 2v2' /%3E%3Cpath d='M4 8m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z' /%3E%3Cpath d='M10 14h4' /%3E%3Cpath d='M12 12v4' /%3E%3C/svg%3E");
}

/* What the research says */
aside.gm-callout--research {
  --gm-bg: #E6F1FB;
  --gm-bar: #185FA5;
  --gm-title: #0C447C;
  --gm-text: #042C53;
  --gm-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M5 21h14' /%3E%3Cpath d='M6 18h2' /%3E%3Cpath d='M7 18v3' /%3E%3Cpath d='M9 11l3 3l6 -6l-3 -3z' /%3E%3Cpath d='M10.5 12.5l-1.5 1.5' /%3E%3Cpath d='M17 3l3 3' /%3E%3Cpath d='M12 21a6 6 0 0 0 3.715 -10.712' /%3E%3C/svg%3E");
}

/* By the numbers */
aside.gm-callout--numbers {
  --gm-bg: #F1EFE8;
  --gm-bar: #5F5E5A;
  --gm-title: #444441;
  --gm-text: #2C2C2A;
  --gm-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M3 13a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v6a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1z' /%3E%3Cpath d='M15 9a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v10a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1z' /%3E%3Cpath d='M9 5a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v14a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1z' /%3E%3Cpath d='M4 20h14' /%3E%3C/svg%3E");
}

/* Why it works */
aside.gm-callout--why {
  --gm-bg: #EEEDFE;
  --gm-bar: #534AB7;
  --gm-title: #3C3489;
  --gm-text: #26215C;
  --gm-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M15.5 13a3.5 3.5 0 0 0 -3.5 3.5v1a3.5 3.5 0 0 0 7 0v-1.8' /%3E%3Cpath d='M8.5 13a3.5 3.5 0 0 1 3.5 3.5v1a3.5 3.5 0 0 1 -7 0v-1.8' /%3E%3Cpath d='M17.5 16a3.5 3.5 0 0 0 0 -7h-.5' /%3E%3Cpath d='M19 9.3v-2.8a3.5 3.5 0 0 0 -7 0' /%3E%3Cpath d='M6.5 16a3.5 3.5 0 0 1 0 -7h.5' /%3E%3Cpath d='M5 9.3v-2.8a3.5 3.5 0 0 1 7 0v10' /%3E%3C/svg%3E");
}

/* Myth vs fact */
aside.gm-callout--myth {
  --gm-bg: #FAEEDA;
  --gm-bar: #854F0B;
  --gm-title: #633806;
  --gm-text: #412402;
  --gm-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M7 20l10 0' /%3E%3Cpath d='M6 6l6 -1l6 1' /%3E%3Cpath d='M12 3l0 17' /%3E%3Cpath d='M9 12l-3 -6l-3 6a3 3 0 0 0 6 0' /%3E%3Cpath d='M21 12l-3 -6l-3 6a3 3 0 0 0 6 0' /%3E%3C/svg%3E");
}

/* Try this */
aside.gm-callout--try {
  --gm-bg: #E1F5EE;
  --gm-bar: #0F6E56;
  --gm-title: #085041;
  --gm-text: #04342C;
  --gm-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M14.7 13.5c-1.1 -2 -1.441 -2.5 -2.7 -2.5c-1.259 0 -1.736 .755 -2.836 2.747c-.942 1.703 -2.846 1.845 -3.321 3.291c-.097 .265 -.145 .677 -.143 .962c0 1.176 .787 2 1.8 2c1.259 0 3 -1 4.5 -1s3.241 1 4.5 1c1.013 0 1.8 -.823 1.8 -2c0 -.285 -.049 -.697 -.146 -.962c-.475 -1.451 -2.512 -1.835 -3.454 -3.538z' /%3E%3Cpath d='M20.188 8.082a1.039 1.039 0 0 0 -.406 -.082h-.015c-.735 .012 -1.56 .75 -1.993 1.866c-.519 1.335 -.28 2.7 .538 3.052c.129 .055 .267 .082 .406 .082c.739 0 1.575 -.742 2.011 -1.866c.516 -1.335 .273 -2.7 -.54 -3.052z' /%3E%3Cpath d='M9.474 9c.055 0 .109 0 .163 -.011c.944 -.128 1.533 -1.346 1.32 -2.722c-.203 -1.297 -1.047 -2.267 -1.932 -2.267c-.055 0 -.109 0 -.163 .011c-.944 .128 -1.533 1.346 -1.32 2.722c.204 1.293 1.048 2.267 1.933 2.267z' /%3E%3Cpath d='M16.456 6.733c.214 -1.376 -.375 -2.594 -1.32 -2.722a1.164 1.164 0 0 0 -.162 -.011c-.885 0 -1.728 .97 -1.93 2.267c-.214 1.376 .375 2.594 1.32 2.722c.054 .007 .108 .011 .162 .011c.885 0 1.73 -.974 1.93 -2.267z' /%3E%3Cpath d='M5.69 12.918c.816 -.352 1.054 -1.719 .536 -3.052c-.436 -1.124 -1.271 -1.866 -2.009 -1.866c-.14 0 -.277 .027 -.407 .082c-.816 .352 -1.054 1.719 -.536 3.052c.436 1.124 1.271 1.866 2.009 1.866c.14 0 .277 -.027 .407 -.082z' /%3E%3C/svg%3E");
}

/* Pro tip */
aside.gm-callout--tip {
  --gm-bg: #EAF3DE;
  --gm-bar: #3B6D11;
  --gm-title: #27500A;
  --gm-text: #173404;
  --gm-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M3 12h1m8 -9v1m8 8h1m-15.4 -6.4l.7 .7m12.1 -.7l-.7 .7' /%3E%3Cpath d='M9 16a5 5 0 1 1 6 0a3.5 3.5 0 0 0 -1 3a2 2 0 0 1 -4 0a3.5 3.5 0 0 0 -1 -3' /%3E%3Cpath d='M9.7 17l4.6 0' /%3E%3C/svg%3E");
}

/* Did you know */
aside.gm-callout--know {
  --gm-bg: #FAECE7;
  --gm-bar: #993C1D;
  --gm-title: #712B13;
  --gm-text: #4A1B0C;
  --gm-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0' /%3E%3Cpath d='M12 16v.01' /%3E%3Cpath d='M12 13a2 2 0 0 0 .914 -3.782a1.98 1.98 0 0 0 -2.414 .483' /%3E%3C/svg%3E");
}

/* Fun fact */
aside.gm-callout--fun {
  --gm-bg: #FBEAF0;
  --gm-bar: #993556;
  --gm-title: #72243E;
  --gm-text: #4B1528;
  --gm-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0' /%3E%3Cpath d='M9 10l.01 0' /%3E%3Cpath d='M15 10l.01 0' /%3E%3Cpath d='M9.5 15a3.5 3.5 0 0 0 5 0' /%3E%3C/svg%3E");
}

/* History corner */
aside.gm-callout--history {
  --gm-bg: #F3EBE0;
  --gm-bar: #7A5A3A;
  --gm-title: #5A3F24;
  --gm-text: #3A2814;
  --gm-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M6.5 7h11' /%3E%3Cpath d='M6.5 17h11' /%3E%3Cpath d='M6 20v-2a6 6 0 1 1 12 0v2a1 1 0 0 1 -1 1h-10a1 1 0 0 1 -1 -1z' /%3E%3Cpath d='M6 4v2a6 6 0 1 0 12 0v-2a1 1 0 0 0 -1 -1h-10a1 1 0 0 0 -1 1z' /%3E%3C/svg%3E");
}