$tag-background-color: $grey-lighter !default;
$tag-color: $text !default;
$tag-radius: $radius-rounded !default;
$tag-delete-margin: 1px !default;

.tags {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;

  .tag {
    margin-bottom: 0.5rem;

    &:not(:last-child) {
      margin-right: 0.5rem;
    }
  }

  &:last-child {
    margin-bottom: -0.5rem;
  }

  &:not(:last-child) {
    margin-bottom: 1rem;
  }

  &.is-centered {
    justify-content: center;

    .tag {
      margin-right: 0.25rem;
      margin-left: 0.25rem;
    }
  }

  &.is-right {
    justify-content: flex-end;

    .tag {
      &:not(:first-child) {
        margin-left: 0.5rem;
      }

      &:not(:last-child) {
        margin-right: 0;
      }
    }
  }
}

.tag {
  display: inline-flex;
  align-items: center;
  background-color: $tag-background-color;
  border-radius: $tag-radius;
  color: $tag-color;
  font-size: $size-small;
  justify-content: center;
  line-height: 1.5;
  padding: .3em 0.75em;
  white-space: nowrap;

  @each $name, $pair in $colors {
    $color: nth($pair, 1);
    $invert: nth($pair, 2);

    &.is-#{$name} {
      background-color: $color;
      color: $invert;
    }
  }

  .delete {
    font-size: inherit;
    height: 1.5em;
    max-height: 1.5em;
    max-width: 1.5em;
    min-height: 1.5em;
    min-width: 1.5em;
    color: inherit;
    margin-left: .25rem;
    margin-right: -.275rem;
  }

  .delete::before,
  .delete::after{
    background: currentColor;
  }
}