// Strange selector mirrors selector used in Bulma
// https://github.com/jgthms/bulma/issues/912
.tag:not(body) {
  text-transform: uppercase;
  border-radius: 200px;
  font-weight: $weight-normal;
  font-size: $size-7;
  line-height: 1;
  height: 1.5em;

  &.is-pending,
  &.is-light {
    background: $grey-blue;
    color: findColorInvert(darken($grey-blue, 10%));
  }

  &.is-running {
    background: $blue;
    color: $blue-invert;
  }

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

  &.is-complete {
    background: $nomad-green-dark;
    color: findColorInvert($nomad-green-dark);
  }

  &.is-error {
    background: $danger;
    color: $danger-invert;
  }

  &.is-cancelled {
    background: $orange;
    color: $orange-invert;
  }

  &.is-unknown {
    background: $unknown;
    color: $primary-invert;
  }

  &.is-hollow {
    font-weight: $weight-semibold;
    color: darken($grey-blue, 20%);
    background: transparent;
  }

  &.no-text-transform {
    text-transform: none;
  }

  &.is-outlined {
    box-shadow: 0 0 0 1px $white;
  }

  &.is-alone {
    padding: 0;
    margin-bottom: 1em;
  }

  &.is-small {
    font-size: 0.7rem;
    vertical-align: 2px;
  }

  .icon {
    height: 1rem;
    width: 1rem;
  }
}
