.badges {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  padding-right: .5rem; }
  .badges-group {
    display: flex;
    align-self: stretch; }
  .badges-end {
    display: flex;
    flex: 0;
    align-self: flex-end; }

.badge {
  display: block;
  width: max-content;
  border-radius: var(--border-radius);
  overflow: hidden;
  padding: 0 .5rem;
  display: flex;
  gap: .5rem;
  flex: none;
  background-color: #456; }
  .badge:has(> span) {
    padding: 0 0 0 .5rem; }
  .badge > span {
    display: block;
    padding: 0 .375rem;
    background-color: #0008; }
  .badge-rule-direction {
    background-color: #555; }
  .badge-nat-host, .badge-rule-host, .badge-reverseproxy-source-host, .badge-reverseproxy-yarp, .badge-certificate-valid, .badge-authentication-totp-enabled, .badge-share-expires-on, .badge-share-expires-never {
    background-color: #473; }
  .badge-reverseproxy-host-modification, .badge-reverseproxy-whitelist-expires-in, .badge-certificate-expires-in {
    background-color: #663; }
  .badge-certificate-invalid, .badge-authentication-totp-disabled, .badge-reverseproxy-authentication, .badge-reverseproxy-whitelist, .badge-reverseproxy-whitelist-expired-for, .badge-reverseproxy-script, .badge-share-expired-on {
    background-color: #743; }