@import "../mixins/icon";

%rufi-icon {
  @include rufi-icon;
}

.rufi-icon-small {
  @include rufi-icon;

  font-size: inherit;
  width: 1.25em;
  height: 1.25em;
  background-color: var(--arg-list-avatar-bg, $arg-list-avatar-bg);
  border-radius: 18%;
  color: currentColor;
  line-height: 1.25em;
  text-align: center;
  vertical-align: text-bottom;

  &[data-type="problem"] {
    background-color: var(--rufi-guide-rule, $rufi-guide-problem);
    color: var(--rufi-guide-fill, $rufi-guide-fill);
  }

  &[data-type="rule"] {
    background-color: var(--rufi-guide-rule, $rufi-guide-rule);
    color: var(--rufi-guide-fill, $rufi-guide-fill);
  }
}
