.badge {
  display: inline-flex;
  align-items: center;
  text-transform: uppercase;
  font-family: $font-condensed;
  font-size: 0.75em;
  padding: 0.25em;
  border-radius: 4px;
  color: inherit;
  line-height: 0.75em;
  flex-shrink: 0;
  cursor: pointer;
  font-weight: 600;

  > i {
    font-weight: 400;
    font-size: 0.875em;
  }

  &.-red {
    background-color: var(--theme-sell-50);
    color: var(--theme-sell-color);
  }

  &.-invert {
    background-color: var(--theme-background-50);
    color: var(--theme-color-100);
  }

  &.-green {
    background-color: var(--theme-buy-100);
    color: var(--theme-buy-color);
    font-weight: 400;
  }

  &.-outline {
    background: 0;
    box-shadow: inset 0 0 0 0.0714285714em currentColor;
    color: currentColor;
    font-weight: 400;
  }

  &.-solid {
    background-color: var(--theme-color-base);
    color: var(--theme-background-base);
  }

  &.-inline {
    padding: 0.125em 0.25em;
    line-height: 1;
    position: relative;
    vertical-align: top;
  }
}
