.c-chip {
  $self: #{&};
  $text: #{$self}__text;
  $leading: #{$self}__leading;
  $trailing: #{$self}__trailing;

  $icon-gap: 5px;
  $padding: 3px 6px;

  $background: $color-grey;
  $font-color: $g-font-color;
  $border-radius: $g-border-radius;

  @mixin make-colored($name, $background, $font-color: #fff) {
    @include make-modifier($name) {
      background-color: $background;
      color: $font-color
    }
  }

  @at-root {
    #{$self} {
      position: relative;
      display: inline-flex;
      flex-flow: row nowrap;
      align-items: center;
      width: auto;
      height: auto;
      padding: $padding;
      margin: auto;
      background: $background;
      color: $font-color;
      border-radius: $border-radius;
      font-size: 100%;
      line-height: 1;
      overflow: hidden;
    }

    #{$text} {
      @include word-nowrap();
    }

    #{$leading} {
      display: inline-block;
      width: auto;
      height: auto;
      margin: auto $icon-gap auto 0;
    }

    #{$trailing} {
      display: inline-block;
      width: auto;
      height: auto;
      margin: auto 0 auto $icon-gap;
    }

    #{$self} {
      @include make-colored('primary', $color-primary);
      @include make-colored('secondary', $color-secondary);
      @include make-colored('success', $color-success);
      @include make-colored('error', $color-error);
      @include make-colored('warn', $color-warn);
      @include make-colored('info', $color-info);
    }

  }
}