.pill {

  display: flex;

  a,
  span {
    display: block;
    padding: 10px;
    flex-grow: 1;
    text-align: left;

    &:first-child {
      margin-left: 0;
    }

    &:last-child {
      margin-right: 0;
    }

  }

  a {
    $background: $link-colour;
    background: $background;
    color: $white;
    border: 2px solid $background;
    position: relative;
    text-decoration: none;
    cursor: pointer;

    .pill-label {
      text-decoration: underline;
    }

    &:link,
    &:visited {
      color: $white;
    }

    &:hover {
      color: $light-blue-25;
    }

    &:active,
    &:focus {
      z-index: 10;
    }
  }

  span {
    border: 2px solid $black;
    outline: 1px solid rgba($white, 0.1);
    position: relative;
    z-index: 1000;
    color: $text-colour;
  }
}

.pill-separate {

  &-item {

    display: block;
    text-align: left;
    padding: 10px $gutter-half;

    &:link,
    &:visited {
      background: $link-colour;
      color: $white;
      text-decoration: underline;
    }

    &:hover {
      color: $light-blue-25;
    }

  }

}