.wf-icon,
[data-wf-icon] {
  align-items: center;
  color: currentColor;
  display: inline-flex;
  flex: 0 0 auto;
  justify-content: center;
  line-height: 1;
  vertical-align: -0.125em;
}

.wf-icon {
  height: 16px;
  width: 16px;
}

.wf-icon svg {
  display: block;
  fill: none;
  height: 100%;
  stroke: currentColor;
  width: 100%;
}

.wf-icon--fill svg {
  fill: currentColor;
  stroke: none;
}

.wf-icon--xs { height: 13px; width: 13px; }
.wf-icon--sm { height: 14px; width: 14px; }
.wf-icon--md { height: 18px; width: 18px; }
.wf-icon--lg { height: 20px; width: 20px; }

.icon-button,
.sidebar-toggle,
.settings-back,
.view-drag-handle,
.rich-text-toolbar button {
  align-items: center;
  display: inline-flex;
  justify-content: center;
}

.button-with-icon,
.back-link,
.page-bar > a,
.profile-signout,
.composer-attachment-actions button,
.primary-button.icon-labeled {
  align-items: center;
  display: inline-flex;
  gap: 7px;
}

.status-icon,
.sidebar-icon,
.settings-sidebar-group .wf-icon,
.settings-workspace-return .wf-icon {
  height: 16px;
  width: 16px;
}

.profile-menu-chevron .wf-icon {
  height: 14px;
  width: 14px;
}

.channel-marker .wf-icon,
.support-channel-icon .wf-icon {
  height: 14px;
  width: 14px;
}

.channel-kind .wf-icon,
.channel-picker .wf-icon {
  height: 20px;
  width: 20px;
}

.rich-text-toolbar .wf-icon {
  height: 15px;
  width: 15px;
}

.applied-tag .wf-icon {
  height: 12px;
  width: 12px;
}

.view-drag-handle .wf-icon {
  height: 18px;
  width: 18px;
}

.settings-list-search > [data-wf-icon] {
  color: var(--muted);
}

button:disabled .wf-icon,
[aria-disabled="true"] .wf-icon {
  opacity: 0.55;
}