.peerings-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px 8px;
  border-radius: 5px;
  gap: 4px;

  &.active {
    background: rgb(var(--tone-green-050));
    color: rgb(var(--tone-green-600));
  }
  &.pending {
    background: rgb(var(--tone-strawberry-050));
    color: rgb(var(--tone-strawberry-500));
  }
  &.establishing {
    background: rgb(var(--tone-blue-050));
    color: rgb(var(--tone-blue-500));
  }
  &.failing {
    background: rgb(var(--tone-red-050));
    color: rgb(var(--tone-red-500));
  }
  &.deleting {
    background: rgb(var(--tone-yellow-050));
    color: rgb(var(--tone-yellow-800));
  }
  &.terminated {
    background: rgb(var(--tone-gray-150));
    color: rgb(var(--tone-gray-800));
  }
  &.undefined {
    background: rgb(var(--tone-gray-150));
    color: rgb(var(--tone-gray-800));
  }

  .peerings-badge__text {
    font-weight: 500;
    font-size: 13px;
  }
}