:root {
  --icon-size-inline: 0.95rem;
  --icon-size-button: 1rem;
  --icon-size-panel: 1.05rem;
  --icon-size-status: 0.92rem;
  --icon-gap-inline: 0.42rem;
}

.ui-icon {
  width: 1em;
  height: 1em;
  display: inline-block;
  flex: 0 0 auto;
  vertical-align: middle;
}

.ui-icon-inline {
  font-size: var(--icon-size-inline);
}

.ui-icon-btn {
  font-size: var(--icon-size-button);
}

.ui-icon-panel {
  font-size: var(--icon-size-panel);
}

.ui-icon-status {
  font-size: var(--icon-size-status);
}

.icon-label {
  display: inline-flex;
  align-items: center;
  gap: var(--icon-gap-inline);
}

.btn-has-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.48rem;
}

.icon-only-btn {
  display: inline-grid;
  place-items: center;
  padding: 0;
}