:root{
  --ui-mask-arrow-up-right:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 17 17 7M9 7h8v8' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --ui-mask-arrow-right:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14m-5-5 5 5-5 5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --ui-mask-arrow-up:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 19V5m-5 5 5-5 5 5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --ui-mask-plus:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M5 12h14' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  --ui-mask-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m5 12 4 4L19 6' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --ui-mask-spark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1c.7 6.7 4.3 10.3 11 11-6.7.7-10.3 4.3-11 11-.7-6.7-4.3-10.3-11-11C7.7 11.3 11.3 7.7 12 1Z' fill='black'/%3E%3C/svg%3E");
}

.ui-icon{
  --ui-icon-mask:var(--ui-mask-arrow-up-right);
  display:inline-block!important;
  width:1em!important;
  height:1em!important;
  min-width:1em;
  flex:0 0 auto;
  border:0!important;
  border-radius:0!important;
  background:currentColor!important;
  color:inherit;
  font-size:inherit;
  line-height:1;
  vertical-align:-.12em;
  -webkit-mask:var(--ui-icon-mask) center/contain no-repeat;
  mask:var(--ui-icon-mask) center/contain no-repeat;
}

.ui-icon-arrow-up-right{--ui-icon-mask:var(--ui-mask-arrow-up-right)}
.ui-icon-arrow-right{--ui-icon-mask:var(--ui-mask-arrow-right)}
.ui-icon-arrow-up{--ui-icon-mask:var(--ui-mask-arrow-up)}
.ui-icon-plus{--ui-icon-mask:var(--ui-mask-plus)}
.ui-icon-check{--ui-icon-mask:var(--ui-mask-check)}
.ui-icon-spark{--ui-icon-mask:var(--ui-mask-spark)}
.ui-icon-status{width:.52em!important;height:.52em!important;min-width:.52em;border-radius:50%!important;background:currentColor!important;-webkit-mask:none;mask:none;vertical-align:.05em}