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

  // Configuration
  $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) {
    &#{$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;
      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;
    }
  }

  @include make-colored($modifier-color-primary, $color-primary);
  @include make-colored($modifier-color-secondary, $color-secondary);
  @include make-colored($modifier-color-success, $color-success);
  @include make-colored($modifier-color-error, $color-error);
  @include make-colored($modifier-color-warn, $color-warn);
  @include make-colored($modifier-color-info, $color-info);
}