/* Marathon icon system, icons.css v1.0.0.
   Load tokens.css first. Copy this file, icons.svg, and svg/ into the app as /brand/. Never hotlink.
   Icons take their colour from the text around them (currentColor). Colour modifiers below
   reference semantic tokens only. A hex typed into this file is a defect.

   Optical sizing. One drawing, four stroke settings. Smaller sizes get a slightly heavier
   stroke so the line never drops under 1.5px on screen, larger sizes get a lighter one so
   the icon does not go clumsy. Detail marked in the source drops out at 16px. */

:root {
  --mc-icon-stroke-16: 2.25;  /* 1.5px on screen */
  --mc-icon-stroke-20: 2.1;   /* 1.75px on screen */
  --mc-icon-stroke-24: 2;     /* 2px on screen, the master */
  --mc-icon-stroke-48: 1.5;   /* 3px on screen, and every size above 48 */
}

.mc-icon {
  display: inline-block;
  flex: none;
  width: 24px;
  height: 24px;
  vertical-align: middle;
  color: inherit;
  fill: none;
  stroke: currentColor;
  stroke-width: var(--mc-icon-stroke-24);
  stroke-linecap: butt;
  stroke-linejoin: miter;
  stroke-miterlimit: 1.5;
  overflow: visible;
}

/* Optical sizes. Use these four. Anything else, pick the nearest one below it. */
.mc-icon--16 { width: 16px; height: 16px; stroke-width: var(--mc-icon-stroke-16); --mc-icon-detail: none; }
.mc-icon--20 { width: 20px; height: 20px; stroke-width: var(--mc-icon-stroke-20); }
.mc-icon--24 { width: 24px; height: 24px; stroke-width: var(--mc-icon-stroke-24); }
.mc-icon--48 { width: 48px; height: 48px; stroke-width: var(--mc-icon-stroke-48); }
/* Display sizes for social, signage, and print. Same stroke ratio as 48. */
.mc-icon--display { width: var(--mc-icon-display-size, 96px); height: var(--mc-icon-display-size, 96px); stroke-width: var(--mc-icon-stroke-48); }

/* Print sizes, in points, for documents and quotes. */
.mc-icon--pt12 { width: 12pt; height: 12pt; stroke-width: var(--mc-icon-stroke-16); --mc-icon-detail: none; }
.mc-icon--pt18 { width: 18pt; height: 18pt; stroke-width: var(--mc-icon-stroke-24); }
.mc-icon--pt36 { width: 36pt; height: 36pt; stroke-width: var(--mc-icon-stroke-48); }

/* Colour. Default is inherit. These are the only other choices. */
.mc-icon--heading { color: var(--mc-text-heading); }
.mc-icon--muted { color: var(--mc-text-tertiary); }
.mc-icon--accent { color: var(--mc-accent); }                     /* Marathon Red, on white only */
.mc-icon--inverse { color: var(--mc-text-inverse); }               /* white, on navy or a scrim */
.mc-icon--accent-on-inverse { color: var(--mc-accent-on-inverse); } /* Red Bright, on navy only */
.mc-icon--success { color: var(--mc-status-success); }
.mc-icon--warning { color: var(--mc-status-warning); }
.mc-icon--error { color: var(--mc-status-error); }
.mc-icon--info { color: var(--mc-status-info); }

/* Icon plus label, the most common pairing in the apps. The gap scales with the icon. */
.mc-icon-label { display: inline-flex; align-items: center; gap: var(--mc-space-03); }
.mc-icon-label > .mc-icon--16 { margin-right: calc(-1 * var(--mc-space-01)); }

/* Icon-only button. Always 44px to touch, whatever size the icon is. */
.mc-icon-button {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--mc-screen-touch-target); height: var(--mc-screen-touch-target);
  padding: 0; border: 0; border-radius: var(--mc-radius-md);
  background: transparent; color: inherit; cursor: pointer;
}
.mc-icon-button:hover { background: var(--mc-action-secondary-hover); }
.mc-icon-button:focus-visible { outline: var(--mc-focus-ring-width) solid var(--mc-border-focus); outline-offset: var(--mc-focus-ring-offset); }