/* Playful Universal icon primitives. SVG paths inherit currentColor. */
.ui-icon {
  display: inline-block;
  flex: 0 0 auto;
  width: var(--icon-md);
  height: var(--icon-md);
  overflow: visible;
  color: inherit;
  fill: none;
  stroke: currentColor;
  stroke-width: var(--icon-stroke-default);
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -.16em;
}
.ui-icon--sm { width: var(--icon-sm); height: var(--icon-sm); }
.ui-icon--lg { width: var(--icon-lg); height: var(--icon-lg); }
.ui-icon--xl { width: var(--icon-xl); height: var(--icon-xl); stroke-width: var(--icon-stroke-emphasis); }
.ui-icon--2xl { width: var(--icon-2xl); height: var(--icon-2xl); stroke-width: var(--icon-stroke-emphasis); }
.ui-icon--3xl { width: var(--icon-3xl); height: var(--icon-3xl); stroke-width: var(--icon-stroke-emphasis); }
.ui-icon--filled { stroke-width: var(--icon-stroke-emphasis); }
.ui-icon--accent { color: var(--accent); }
.ui-icon--success { color: var(--success-fg); }
.ui-icon--warning { color: var(--warning-fg); }
.ui-icon--danger { color: var(--danger-fg); }
.ui-icon--info { color: var(--info-fg); }

.ui-icon-tile {
  display: inline-grid;
  width: var(--control-lg);
  height: var(--control-lg);
  place-items: center;
  color: var(--on-decor);
  background: var(--decor-sun);
  border: var(--stroke-default) solid var(--text-primary);
  border-radius: var(--radius-control);
  box-shadow: var(--shadow-pop-rest);
  transform: rotate(-3deg);
}
.ui-icon-tile--mint { background: var(--decor-mint); transform: rotate(3deg); }
.ui-icon-tile--sky { background: var(--decor-sky); transform: rotate(-2deg); }
.ui-icon-tile--grape { background: var(--decor-grape); transform: rotate(3deg); }
.ui-icon-tile--coral { background: var(--accent-solid); transform: rotate(-3deg); }

@media (forced-colors: active) {
  .ui-icon-tile { background: Canvas; border-color: ButtonText; }
}