.o-icon {
  --icon-btn-color: var(--o-color-info1);
  --icon-btn-color-hover: var(--o-color-info2);
  --icon-btn-color-active: var(--o-color-info3);
  --icon-btn-color-disabled: var(--o-color-info4);
  --icon-size: 1em;
}

.o-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--icon-size);
}

.o-icon-btn {
  color: var(--icon-btn-color);
  cursor: pointer;
}
@media (hover: hover) {
  .o-icon-btn:hover {
    color: var(--icon-btn-color-hover);
  }
}
.o-icon-btn:active, .o-icon-btn:focus-visible {
  color: var(--icon-btn-color-active);
}

.o-icon-btn-disabled {
  cursor: not-allowed;
}
.o-icon-btn-disabled, .o-icon-btn-disabled:hover, .o-icon-btn-disabled:focus-visible, .o-icon-btn-disabled:active {
  color: var(--icon-btn-color-disabled);
}