IconButton.css

/**
 * Pane Menu Icon
 */



.iconButton {
  composes: interactionStylesControl from "../sharedStyles/interactionStyles.css";
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  outline: 0;
  transition: opacity 0.4s;
  border-radius: 0;
  background: none;
  color: var(--color-icon);

  & + .iconButton {
    margin-left: 0.25em;
  }
}

.iconButton:disabled,
.iconButton[disabled]{
  pointer-events: none;
}

/* To avoid global :visited color on anchor tags */
a.iconButton {
  color: var(--color-icon);
}

.iconButtonInner {
  composes: interactionStyles from "../sharedStyles/interactionStyles.css";
  display: flex;
  align-items: center;
  pointer-events: none;
  padding: 0.25em;
}

/**
 * Size
 */

.small {
  font-size: var(--font-size-small);
}

[dir="rtl"] {
  & .iconButton {
    & + .iconButton {
      margin-left: 0;
      margin-right: 0.25em;
    }
  }
}

/**
 * With badge
 */

/* Let the button expand in width if we have a badge */
.iconButton.hasBadge {
  width: auto;
}

/* Add spacing between icon and badge */
.hasBadge .icon::after {
  content: '';
  width: 0.3em;
  display: inline-block;
}