/* Original dotted shapes by Женя, copied from assets/Icons without modification.
   Masks inherit text color, including black icons on cream buttons. */
.ui-icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  vertical-align: middle;
  background-color: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
  pointer-events: none;
}
.ui-icon--arrow-bottom-left { --icon: url("./icons/arrow-bottom-left.svg"); }
.ui-icon--arrow-bottom-right { --icon: url("./icons/arrow-bottom-right.svg"); }
.ui-icon--arrow-bottom { --icon: url("./icons/arrow-bottom.svg"); }
.ui-icon--arrow-left { --icon: url("./icons/arrow-left.svg"); }
.ui-icon--arrow-right { --icon: url("./icons/arrow-right.svg"); }
.ui-icon--arrow-top-left { --icon: url("./icons/arrow-top-left.svg"); }
.ui-icon--arrow-top-right { --icon: url("./icons/arrow-top-right.svg"); }
.ui-icon--arrow-top { --icon: url("./icons/arrow-top.svg"); }
.ui-icon--menu { --icon: url("./icons/menu.svg"); }
.ui-icon--minus { --icon: url("./icons/minus.svg"); }
.ui-icon--pin { --icon: url("./icons/pin.svg"); }
.ui-icon--plus { --icon: url("./icons/plus.svg"); }
.practical[open] .ui-icon--plus { --icon: url("./icons/minus.svg"); }
@media (forced-colors: active) {
  .ui-icon { background-color: CanvasText; }
}