/* oO5 Dynasty Icon System v1.0 */
:root {
  --oo5-icon-url: url("../icons/oo5.svg");
  --oo5-peach: #fdcbb2;
}

/* Font Awesome-style usage: <i class="oo5-icon" aria-hidden="true"></i> */
.oo5-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  -webkit-mask-image: var(--oo5-icon-url);
  mask-image: var(--oo5-icon-url);
  -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: 0 0 auto;
}

/* Inline/sprite SVG usage */
svg.oo5-svg-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  fill: currentColor;
  vertical-align: -0.125em;
  overflow: visible;
  flex: 0 0 auto;
}

.oo5-icon--xs { font-size: .75em; }
.oo5-icon--sm { font-size: .875em; }
.oo5-icon--lg { font-size: 1.333em; }
.oo5-icon--2x { font-size: 2em; }
.oo5-icon--3x { font-size: 3em; }
.oo5-icon--4x { font-size: 4em; }

.oo5-icon--peach { color: var(--oo5-peach); }
.oo5-icon--light { color: #fefffe; }
.oo5-icon--dark { color: #111; }
.oo5-icon--spin { animation: oo5-icon-spin 2s linear infinite; }

@keyframes oo5-icon-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .oo5-icon--spin { animation: none; }
}