/* Tags */

.tags {
  @include unstyled-list($inline: true);

  li:last-child a {
    margin-right: 0;
  }
}

.tag {
  display: inline-block;
  margin: 0 $spacing-02 $spacing-03 0;
  padding: $spacing-01 $spacing-03;
  border-radius: 9999px; // hack-y way to create pill shape
  background: $warm-black;
  color: $white;
  text-decoration: none;
  @include typescale-06;

  a {
    text-decoration: none;
    color: $white;

    &:hover, &:focus, &:active {
      color: $grapefruit;

      svg {
        stroke: $grapefruit;
      }
    }
  }

  svg {
    position: relative;
    padding-right: $spacing-01;
    top: 2px;
    stroke: $white;
  }
}

.tag--featured {
  background: $grapefruit;
  color: $white;

  svg {
    stroke: $warm-black;
  }

  a {
    color: $warm-black;
  }

  &:hover, &:focus, &:active {
    background-color: $warm-black;
    color: $white;

    svg {
      stroke: $white;
    }
  }
}

.tag--secondary {
  background: $dark-grey;
  color: $white;

  a, svg {
    color: $white;
    stroke: $white;
  }

  &[aria-selected=true] {
    background-color: $warm-black;
    color: $white;
  }
}

.tag--tertiary {
  background: $light-grey;
  color: $warm-black;

  a, svg {
    color: $warm-black;
    stroke: $warm-black;
  }

  &[aria-selected=true] {
    background-color: $dark-grey;
    color: $white;
  }
}

.tag--confirmation {
  background: $dark-green;
  color: $white;
}
