/* Icons (it-340): inline stroke SVGs from the site's icon partial, colored by currentColor. Decorative — every one is
 * aria-hidden, and its meaning is in the text beside it.
 */

.mkt-icon {
  width: var(--mkt-icon-lg);
  height: var(--mkt-icon-lg);
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: var(--mkt-stroke);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mkt-icon--solid {
  fill: currentColor;
  stroke: none;
}

/* An icon in a rounded square. */
.mkt-icon-box {
  width: var(--mkt-icon-box);
  height: var(--mkt-icon-box);
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--mkt-radius-md);
  background: var(--mkt-tint-strong);
  color: var(--mkt-purple);
}

.mkt-icon-box--white {
  background: var(--mkt-surface);
}

.mkt-icon-box--sm {
  width: var(--mkt-icon-box-sm);
  height: var(--mkt-icon-box-sm);
  border-radius: var(--mkt-radius-sm);
}

.mkt-icon-box--md {
  width: var(--mkt-icon-box-md);
  height: var(--mkt-icon-box-md);
}

.mkt-icon-box--lg {
  width: var(--mkt-icon-box-lg);
  height: var(--mkt-icon-box-lg);
}

.mkt-icon-box--sm .mkt-icon { width: var(--mkt-icon-sm); height: var(--mkt-icon-sm); }
.mkt-icon-box--md .mkt-icon { width: var(--mkt-icon-md); height: var(--mkt-icon-md); }
.mkt-icon-box--lg .mkt-icon { width: var(--mkt-icon-xl); height: var(--mkt-icon-xl); }

.mkt-icon-box--brand { background: var(--mkt-purple); color: var(--mkt-surface); }
.mkt-icon-box--clay { background: var(--mkt-clay-bg); color: var(--mkt-clay); }
.mkt-icon-box--blue { background: var(--mkt-blue-bg); color: var(--mkt-blue); }
.mkt-icon-box--green { background: var(--mkt-green-bg); color: var(--mkt-green); }
.mkt-icon-box--sun { background: var(--mkt-sun-bg); color: var(--mkt-sun); }

/* The brand's own mark in a box: the dot. */
.mkt-icon-box--dot::before {
  content: '';
  width: var(--mkt-icon-2xs);
  height: var(--mkt-icon-2xs);
  border-radius: 50%;
  background: var(--mkt-surface);
}

/* Letters in a box (a file's type). */
.mkt-icon-box--text {
  font-size: var(--mkt-size-4xs);
  font-weight: var(--mkt-weight-heavy);
}

/* A check in a circle, before a list line. */
.mkt-check {
  width: var(--mkt-check-mark);
  height: var(--mkt-check-mark);
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--mkt-surface);
  color: var(--mkt-purple);
}

.mkt-check .mkt-icon {
  width: var(--mkt-icon-xs);
  height: var(--mkt-icon-xs);
  stroke-width: var(--mkt-stroke-heavy);
}