$block = ".badge";

{$block} {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  box-sizing: border-box;
  padding: 3px 10px 3px 5px;
  min-height: 24px;
  border: 1px solid transparent;
  border-radius: 3px;
  background: $c-gray-lighter;
  color: $c-gray-darker;
  font-weight: 300;
  font-size: 14px;
  line-height: 1;

  svg {
    flex-shrink: 0;
    margin: 0 5px 0 0;
    fill: $c-gray-darker;
  }

  &--right-aligned-icon {
    flex-direction: row-reverse;
    padding: 3px 5px 3px 6px;

    svg {
      margin: 0 0 0 5px;
    }
  }

  &:focus {
    outline: 1px dotted $c-gray-base;
  }

  &--dark {
    background: $c-gray-dark;
    color: $c-white-base;

    svg {
      fill: $c-white-base;
    }
  }

  &--darker {
    background: $c-gray-darker;
    color: $c-white-darker;

    svg {
      fill: $c-white-darker;
    }
  }

  &--success {
    background: $c-success-lightest;
  }

  &--tooltip {
    position: relative;
  }
}