/*
 * Icons: one single-colour SVG per icon, painted in the current text colour,
 * so the same file works in every brand and mode.
 *
 *   <span class="icon icon-plus" aria-hidden="true"></span>
 *
 * Size follows the font size (1em); set width/height to change it.
 */
.icon {
  display: inline-block;
  flex: none;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  -webkit-mask: var(--cf-icon) center / contain no-repeat;
  mask: var(--cf-icon) center / contain no-repeat;
}

.icon-check { --cf-icon: url(../../images/check-line-white.svg); }
.icon-plus { --cf-icon: url(../../images/plus.svg); }
.icon-x { --cf-icon: url(../../images/x-white.svg); }
.icon-arrow-right { --cf-icon: url(../../images/right-white.svg); }
.icon-arrow-left { --cf-icon: url(../../images/back-btn-white.svg); }
.icon-shuffle { --cf-icon: url(../../images/simple-button.svg); }
.icon-download { --cf-icon: url(../../images/download-btn.svg); }
.icon-edit { --cf-icon: url(../../images/edit-w.svg); }
.icon-pin { --cf-icon: url(../../images/page-pin-button.svg); }
.icon-pin-sm { --cf-icon: url(../../images/pin-16.svg); }
.icon-reorder { --cf-icon: url(../../images/sorting-icon.svg); }
.icon-bold { --cf-icon: url(../../images/b.svg); }
.icon-italic { --cf-icon: url(../../images/i.svg); }
.icon-underline { --cf-icon: url(../../images/u.svg); }
.icon-strike { --cf-icon: url(../../images/s.svg); }
.icon-list-ul { --cf-icon: url(../../images/ul.svg); }
.icon-list-ol { --cf-icon: url(../../images/ol.svg); }
.icon-align-left { --cf-icon: url(../../images/align-left.svg); }
.icon-align-center { --cf-icon: url(../../images/align-center.svg); }
.icon-align-right { --cf-icon: url(../../images/align-right.svg); }
.icon-copy { --cf-icon: url(../../images/copy.svg); }
.icon-eye { --cf-icon: url(../../images/opened.svg); }
.icon-eye-off { --cf-icon: url(../../images/closed-eye.svg); }