@mixin addmargins($name, $size) {
  &-#{$name} {
    margin:$size;
  }

  &b-#{$name} {
    margin-bottom:$size;
  }

  &r-#{$name} {
    margin-right:$size;
  }

  &l-#{$name} {
    margin-left:$size;
  }

  &t-#{$name} {
    margin-top:$size;
  }
}

@mixin addpaddings($name, $size) {
  &-#{$name} {
    padding:$size;
  }

  &b-#{$name} {
    padding-bottom:$size;
  }

  &r-#{$name} {
    padding-right:$size;
  }

  &l-#{$name} {
    padding-left:$size;
  }

  &t-#{$name} {
    padding-top:$size;
  }
}

.m {
  @include addmargins("half", $lineheight * .5);
  @for $i from 0 through 4 {
    @include addmargins($i, $lineheight*$i)
  }
}

.p {
  @include addpaddings("half", $lineheight * .5);
  @for $i from 0 through 4 {
    @include addpaddings($i, $lineheight*$i)
  }
}

.ellipsis {
  flex: 1;

  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  width: 0;
  padding-right: 6px;
}