/* Icon controls use the channel add button's outline and quiet hover style. */
.icon-button,
.compact-icon {
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--theme-quiet, var(--stream-quiet, #7d8da3));
  box-shadow: none;
}
.icon-button:hover:not(:disabled),
.compact-icon:hover:not(:disabled) {
  background: var(--theme-soft, var(--stream-soft, #ffffff10));
  color: var(--theme-accent, var(--stream-accent, #9bbcff));
}
:is(.icon-button, .compact-icon).danger-icon:hover:not(:disabled) {
  color: var(--theme-bad, #ee8b98);
}
button.compact-icon > .ui-icon {
  width: 18px;
  height: 18px;
  stroke-width: 1.8;
}
#sidebar .voice-actions .compact-icon,
.stage-call-controls .compact-icon {
  background: transparent;
}
.compact-icon:focus-visible {
  outline: 2px solid var(--theme-accent, var(--stream-accent, #9bbcff));
  outline-offset: 3px;
}
#customAvatars .custom-avatar-tile .compact-icon {
  width: 28px;
  min-width: 28px;
  height: 28px;
  min-height: 28px;
  background: var(--theme-surface);
}
@media (max-width: 700px), (pointer: coarse) {
  #notice .compact-icon {
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
  }
}