.optionButton {
  display: inline-flex;
  align-items: center;

  padding: 0 0.5em;
  box-sizing: border-box;
  height: 2em;
  border-radius: 0.5em;

  &:hover {
    background-color: var(--bit-bg-heavy);
  }

  &.active {
    color: var(--bit-accent-color, #6c5ce7);
    background-color: var(--bit-border-color-lightest, #ededed);
  }

  &:focus {
    box-shadow: 0 0 0 0.125em var(--bit-accent-bg, #eceaff);
    outline: none;
  }

  // reset button styles:
  background: none;
  border: none;
  color: inherit;
  font-size: inherit;
}