.api {
  margin-right: .35rem;
  padding: .15rem .5rem .25rem;
  border-radius: $radius;
  color: $g20-white;
  font-family: $code;
  font-weight: bold;
  font-size: 1rem;

  &.get { background: $gr-viridian; }
  &.post { background: $b-ocean; }
  &.patch { background: $y-topaz; }
  &.delete { background: $r-ruby; }
  &.put {background: $br-pulsar; }
}

&.api-endpoint {
  a {
    position: relative;
    color: $article-code-link;
    text-decoration: none;

    &:after {
      content: "\e90d";
      position: absolute;
      right: -1.45rem;
      top: 0.65rem;
      font-family: "icomoon-v4";
      color: $article-code-link-hover;
      display: inline-block;
      font-size: 1.1rem;
      line-height: 0;
      opacity: 0;
      transition: opacity .2s;
    }

    &:hover {
      color: $article-code-link-hover;
      &:after {opacity: .6;
      }
    }
  }
}