xrpl-dev-portal/styles/_status-labels.scss

/* Status labels ("DEV" etc) for non-enabled features ----------------------- */

.status {
  cursor: help;
  padding: 1px 2px;
  font-weight: normal;
  text-indent: 0;
}
.status.not_enabled {
  /* flask icon for "not yet enabled" features */
  color: $warning;
}
.status.removed {
  /* trash icon for removed features */
  color: $danger;
}

/* "Topic by Label" browsing ------------------------------------------------ */

.labels-wrap {
  ul::before {
    content: "\f02c";
    font-family: FontAwesome;
    font-size: 1.5rem;
  }
  .list-inline-item {
    margin-top: 0.5rem;
  }
}
.pg-category {
  color: $gray-400;

  &::after {
    content: "\f105"; /* fontawesome angle-right */
    font-family: FontAwesome;
    padding-left: 5px;
  }
}

.label {
  border-radius: 100px;
  border-width: 0;
  padding: .5rem 1rem;
  font-weight: bold;
  text-decoration: none !important;
  text-align: center;
  white-space: nowrap;

  .badge-pill {
    width: 24px;
    height: 24px;
    border-radius: 50px;
    margin-left: 0.5rem;
    font-weight: 400;
    line-height: 23px;
    font-size: 16px;
    padding: 0;
    margin-top: -2px;
  }

  // default, uncolored labels (gray)
  background-color: $gray-900;
  color: $gray-300;

  html.light & {
    background-color: $gray-200;
    color: $gray-800;
    .badge-pill {
      color: $gray-200;
      background-color: $gray-800;
    }
    &:hover {
      background-color: $gray-300;
      color: $gray-900;
      .badge-pill {
        color: $gray-300;
        background-color: $gray-900;
      }
    }
  }

  .badge-pill {
    color: $gray-900;
    background-color: $gray-300;
  }

  &:hover {
    color: $gray-200;
    background-color: $gray-800;

    .badge-pill {
      color: $gray-800;
      background-color: $gray-200;
    }
  }

  @mixin chip-indigo {
    background-color: $blue-purple-900;
    color: $blue-purple-300;
    .badge-pill {
      color: $blue-purple-900;
      background-color: $blue-purple-300;
    }
    &:hover {
      background-color: $blue-purple-800;
      color: $blue-purple-200;
      .badge-pill {
        color: $blue-purple-800;
        background-color: $blue-purple-200;
      }
    }

    html.light & {
      background-color: $blue-purple-200;
      color: $blue-purple-800;
      .badge-pill {
        color: $blue-purple-200;
        background-color: $blue-purple-800;
      }
      &:hover {
        background-color: $blue-purple-300;
        color: $blue-purple-900;
        .badge-pill {
          color: $blue-purple-300;
          background-color: $blue-purple-900;
        }
      }
    }
  }

  @mixin chip-green {
    background-color: $green-900;
    color: $green-300;
    .badge-pill {
      background-color: $green-300;
      color: $green-900;
    }
    &:hover {
      background-color: $green-800;
      color: $green-200;
      .badge-pill {
        background-color: $green-200;
        color: $green-800;
      }
    }

    html.light & {
      background-color: $green-200;
      color: $green-900;
      .badge-pill {
        color: $green-200;
        background-color: $green-900;
      }
      &:hover {
        background-color: $green-300;
        color: $black;
        .badge-pill {
          color: $green-300;
          background-color: $black;
        }
      }
    }
  }

  @mixin chip-purple {
    background-color: $red-purple-900;
    color: $red-purple-300;
    .badge-pill {
      background-color: $red-purple-300;
      color: $red-purple-900;
    }
    &:hover {
      background-color: $red-purple-800;
      color: $red-purple-200;
      .badge-pill {
        background-color: $red-purple-200;
        color: $red-purple-800;
      }
    }

    html.light & {
      background-color: $red-purple-200;
      color: $red-purple-800;
      .badge-pill {
        color: $red-purple-200;
        background-color: $red-purple-800;
      }
      &:hover {
        background-color: $red-purple-300;
        color: $red-purple-900;
        .badge-pill {
          color: $red-purple-300;
          background-color: $red-purple-900;
        }
      }
    }
  }

  @mixin chip-yellow {
    background-color: $yellow-900;
    color: $yellow-300;
    .badge-pill {
      background-color: $yellow-300;
      color: $yellow-900;
    }
    &:hover {
      background-color: $yellow-800;
      color: $yellow-200;
      .badge-pill {
        background-color: $yellow-200;
        color: $yellow-800;
      }
    }

    html.light & {
      background-color: $yellow-200;
      color: $yellow-800;
      .badge-pill {
        color: $yellow-200;
        background-color: $yellow-800;
      }
      &:hover {
        background-color: $yellow-300;
        color: $yellow-900;
        .badge-pill {
          color: $yellow-300;
          background-color: $yellow-900;
        }
      }
    }
  }

  @mixin chip-blue {
    background-color: $blue-900;
    color: $blue-300;
    .badge-pill {
      background-color: $blue-300;
      color: $blue-900;
    }
    &:hover {
      background-color: $blue-800;
      color: $blue-200;
      .badge-pill {
        background-color: $blue-200;
        color: $blue-800;
      }
    }

    html.light & {
      background-color: $blue-200;
      color: $blue-800;
      .badge-pill {
        color: $blue-200;
        background-color: $blue-800;
      }
      &:hover {
        background-color: $blue-300;
        color: $blue-900;
        .badge-pill {
          color: $blue-300;
          background-color: $blue-900;
        }
      }
    }
  }

  @mixin chip-orange {
    background-color: $orange-900;
    color: $orange-300;
    .badge-pill {
      background-color: $orange-300;
      color: $orange-900;
    }
    &:hover {
      background-color: $orange-800;
      color: $orange-200;
      .badge-pill {
        background-color: $orange-200;
        color: $orange-800;
      }
    }

    html.light & {
      background-color: $orange-200;
      color: $orange-800;
      .badge-pill {
        color: $orange-200;
        background-color: $orange-800;
      }
      &:hover {
        background-color: $orange-300;
        color: $orange-900;
        .badge-pill {
          color: $orange-300;
          background-color: $orange-900;
        }
      }
    }
  }

  @mixin chip-magenta {
    background-color: $magenta-900;
    color: $magenta-300;
    .badge-pill {
      background-color: $magenta-300;
      color: $magenta-900;
    }
    &:hover {
      background-color: $magenta-800;
      color: $magenta-200;
      .badge-pill {
        background-color: $magenta-200;
        color: $magenta-800;
      }
    }

    html.light & {
      background-color: $magenta-200;
      color: $magenta-800;
      .badge-pill {
        color: $magenta-200;
        background-color: $magenta-800;
      }
      &:hover {
        background-color: $magenta-300;
        color: $magenta-900;
        .badge-pill {
          color: $magenta-300;
          background-color: $magenta-900;
        }
      }
    }
  }

  &.label-accounts,
  &.label-payment-channels,
  &.label-アカウント,
  &.label-payment-channel,
  &.chip-indigo {
    @include chip-indigo;
  }

  &.label-blockchain,
  &.label-xrp,
  &.label-ブロックチェーン,
  &.label-non-fungible-tokens-nfts,
  &.chip-green {
    @include chip-green;
  }

  &.label-checks,
  &.label-core-server,
  &.label-コアサーバー,
  &.chip-purple  {
    @include chip-purple;
  }

  &.label-cross-currency,
  &.label-security,
  &.label-複数通貨間,
  &.label-セキュリティ,
  &.chip-yellow {
    @include chip-yellow;
  }

  &.label-decentralized-exchange,
  &.label-smart-contracts,
  &.label-transaction-sending,
  &.label-分散型取引所,
  &.label-スマートコントラクト,
  &.label-トランザクション送信,
  &.chip-blue {
    @include chip-blue;
  }

  &.label-escrow,
  &.label-tokens,
  &.label-development,
  &.label-トークン,
  &.label-開発,
  &.chip-orange {
    @include chip-orange;
  }

  &.label-fees,
  &.label-payments,
  &.label-data-retention,
  &.label-手数料,
  &.label-支払い,
  &.label-データ保持,
  &.chip-magenta {
    @include chip-magenta;
  }
}

.tag-cloud {
  .list-inline-item {
    margin-top: 1.5rem;
  }
}